Jump to content

Recommended Posts

Наверно, все просто: подскажите, пожалуйста, как реализовать такое: нужна фиксированная шапка и две области под ней: слева аля меню, в ней может быть прокрутка. И справа - вторая область, 100% высоты и ширины всего остального пространства. Таким образом на странице браузера не должно быть прокрутки. Как это можно простыми средствами сделать? Вот что я имею ввиду (см. картинку): идеально, если у шапки будет тень.

Q1.png

Link to post
Share on other sites

Да, но у меня Div для содержимого образует прокрутку на высоту шапки, а так же образуется горизонтальная прокрутка.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		html, body {			
			margin: 0px;
			height: 100%; 
		}		
		#main-header {			
			background: #fafafb;
			height: 32px;
			vertical-align: middle;
			-webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
			-moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
			box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
		}		
		#main-header p {
			margin-left: 20px;
			font-weight: 600;
		}
		#main-container {
			background: yellow;
			height: 100%
		}
		.div1 {    
			width: 350px;
			background: #ccc;
			float: left;
			height: 100%
		}
		.div2{    
			width: 100%;			
			background: #c00;   
			margin-left: 350px;
			height: 100%
		}		
	</style>
</head>
<body>
	<header id="main-header">
		<p>Заголовок</p>
	</header >
	<div id="main-container">
		<div class="div1">div1</div>
		<div class="div2">div2</div>
	</div>
</body>
</html>

 

Edited by Online
Link to post
Share on other sites

Спасибо. Сделал вот так. Но если в первом блоке "content-filter" будет много текста (и другого содержимого), то как сделать, чтобы прокрутка была только в нем? Сейчас прокрутка получается у всей страницы...

И еще, как сделать, чтобы тень от хидера накладывалась на блоки ниже? Сейчас по сути ее и не видно.

<!doctype html>
<title>Example</title>
<style>
  * {
    box-sizing: border-box; 
  }
  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
  }
  #main-header {
    background: #fafafb;
    height: 40px;
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.4);
    margin-bottom: 0px;
  }  
  #content-main {
    display: flex;
    flex: 1;
  }
  #content-filter {    
    flex: 0 0 350px;
    order: 1;
    background: #D7E8D4;    
  }  
  #content-article {
    flex: 1;
    order: 2;
  }
</style>
<body>
  <header id="main-header">Header</header>
  <div id="content-main">
    <div id="content-filter">Filter</div>
    <div id="content-article">Article</div>    
  </div>  
</body> 

 

Edited by Online
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    47,079
    Total Members
    1,451
    Most Online
    SkVladimir88
    Newest Member
    SkVladimir88
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...