У меня есть страница, которую Im создает, где основное меню находится в левой части страницы, и я хочу, чтобы она заполнила всю левую сторону.
Пример изображения:
Синяя часть - это логотип, главное меню, область авторских прав. Более темная серая часть - это основной контент.
Прямо сейчас у меня это закодировано, так что темно-серая область на самом деле представляет собой элемент html, который имеет серый градиент, а синяя область - это div, который я разместил слева. Проблема, с которой я сталкиваюсь, заключается в том, что когда в серой области есть достаточно содержимого, в котором вам нужно прокручивать вниз, левый div не распространяется на него.
Я хочу, чтобы синие и серые области оставались неподвижными.
HTML:
<body class="clearfix">
<div id="left">
<div id="logo">
<a href="index.html"><img src="images/logo.png" /></a>
</div><!-- END logo -->
<div id="mainNav">
<ul>
<li><a href="aboutMe.html">About Me</a></li>
<li><a href="contactMe.html">Contact Me</a></li>
<li><a href="index.html">Portfolio</a></li>
</ul>
</div><!-- END menu -->
<div id="copyright">
© 2014
</div><!-- END copyright -->
</div><!-- END left -->
<div id="right">
</div><!-- END right -->
</body>
CSS:
html {
background: #333132 fixed center top;
background-image: -o-linear-gradient(top, #0b0b0b 0%, #333132 100%);
background-image: -moz-linear-gradient(top, #0b0b0b 0%, #333132 100%);
background-image: -webkit-linear-gradient(top, #0b0b0b 0%, #333132 100%);
background-image: -ms-linear-gradient(top, #0b0b0b 0%, #333132 100%);
background-image: linear-gradient(to top, #0b0b0b 0%, #333132 100%);
}
html, body {
height: 100%;
margin: 0;
}
#left {
width: 300px;
min-height: 100%;
float: left;
background: #316b9c fixed center top;
background-image: -o-linear-gradient(left, #316b9c 0%, #194980 100%);
background-image: -moz-linear-gradient(left, #316b9c 0%, #194980 100%);
background-image: -webkit-linear-gradient(left, #316b9c 0%, #194980 100%);
background-image: -ms-linear-gradient(left, #316b9c 0%, #194980 100%);
background-image: linear-gradient(to left, #316b9c 0%, #194980 100%);
box-shadow: 3px 0px 5px #0b0b0b;
margin-right: 50px;
position: relative;
}
#logo {
text-align: center;
margin: 20px 0;
}
#mainNav ul {
text-align: right;
font-size: 10px;
margin-right: 50px;
}
#mainNav ul li{
display: inline-block;
margin-left: 10px;
}
#copyright {
color: white;
text-align: right;
font-size: 10px;
margin-right: 50px;
position: absolute;
bottom: 10px;
right: 0;
}
Вам нужно закрыть теги div, которые вы начали с id = "right" в вашей разметке HTML. Вам также необходимо определить значения CSS для параметра #right в вашем CSS.