Шапка и 100% DIV

Online · September 27, 2020

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

npofopr · September 28, 2020

А сами вы что то пробовали?

Online · September 28, 2020

Да, но у меня 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 September 28, 2020 by Online

npofopr · September 28, 2020

Почитайте про
box-sizing
вместо float, используйте flex
и могут пригодится единицы измерения vh для высоты.

https://www.quackit.com/html/templates/css_flexbox_templates.cfm

Online · September 28, 2020

Спасибо. Сделал вот так. Но если в первом блоке "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 September 28, 2020 by Online

Switch74 · September 29, 2020

https://jsfiddle.net/t5jk8bc0/

Online · September 29, 2020

Спасибо, изучаю.

Sign In

Шапка и 100% DIV

Question

Online

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

Online

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

Online

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Online

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information