al_im
Новичок
Дата регистрации:
20.05.2012 18:25:19
Сообщений: 16
Здравствуйте, Михаил Русаков.
Можете подсказать как избавиться от данной проблемы?
Мне нужно что бы содержимое блока с контентом не выезжало за футер, а автоматически создавало отступы при большом размере текста. Вот скриншот с мозиллы:http://s016.radikal.ru/i334/1208/b9/e5939dd54d0a.jpg
А вот сам код:
<html>
<head>
<meta http-equiv="content-type" content="charset=windows-1251; text/html;">
<title>Мой сайт</title>
</head>
<body>
<style>
#all {
margin-left: 130px;
width: 1000px;
height: 600px;
}
#content {
border: 1px solid black;
height: 70%;
width: 797;
margin-left: 203px;
}
#content p {
margin-left: 10px;
margin-top: 5px;
}
#header {
border: 1px solid black;
height: 25%;
width: 100%;
margin-bottom: 1px;
}
#left {
border: 1px solid black;
height: 70%;
float: left;
width: 200px;
}
#right {
border: 1px solid black;
height: 70%;
float: right;
width: 20%;
display: none;
}
#clear {
clear: both;
}
#footer {
margin-top: 1px;
border: 1px solid black;
height: 5%;
width: 100%;
}
</style>
<div id="all">
<div id="header">Шапка сайта</div>
<div id="left">Левый блок</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac mollis sapien. Maecenas tempus luctus eros at posuere. Donec elementum malesuada euismod. Curabitur bibendum dignissim leo, fringilla accumsan urna imperdiet quis. Curabitur in dui eros, quis condimentum tellus. Vestibulum id diam elit, sit amet luctus neque. Fusce mattis semper libero, nec imperdiet velit imperdiet eu.
Morbi pulvinar semper sem. Integer non leo ut metus dictum mattis ac id sapien. Duis mattis dapibus blandit. Phasellus quis eros non velit aliquam tincidunt in nec quam. Maecenas nisi turpis, euismod sed placerat eget, porttitor a nisi. Donec sem erat, venenatis sodales lacinia non, adipiscing adipiscing libero. Morbi eget sem nunc. Nulla facilisi. Maecenas felis est, ultrices sed malesuada vitae, vulputate scelerisque turpis. Aliquam eu urna tellus, non consectetur nulla. Proin fermentum sagittis lacus. Cras hendrerit mollis libero vitae molestie.
Ut scelerisque orci nec orci vehicula eget rhoncus elit lacinia. Integer eget erat leo, sed elementum odio. Donec scelerisque nisl id diam consectetur tincidunt pharetra lectus hendrerit. Proin a ultricies ante. Nunc rutrum enim et ipsum interdum et adipiscing est rutrum. Nam et quam lorem, sed euismod nulla. Praesent rhoncus ornare lacinia. Cras porta risus nec turpis tempor commodo quis eget nibh. Cras arcu magna, feugiat at accumsan quis, elementum non mi. Integer posuere molestie orci vitae posuere. Curabitur viverra nulla nibh. Fusce vitae diam quam, vitae ullamcorper risus.
Donec ac justo enim. Aliquam viverra ultricies justo quis posuere. Donec lobortis mattis euismod. Cras tempor porttitor odio, sed euismod risus mattis ac. Etiam in posuere nisi. Proin nec dolor id libero hendrerit vestibulum. Sed at est erat, vel lacinia orci.
Morbi sem urna, consequat in congue eget, rhoncus non nisl. Nullam lacinia nibh in est fringilla lobortis non at enim. Suspendisse leo metus, feugiat in commodo nec, iaculis porttitor magna. Praesent sapien lacus, mattis sed molestie nec, porta in nibh. Proin eu felis erat, eget pellentesque velit. Quisque ante massa, pretium sit amet molestie malesuada, molestie quis elit. Cras ipsum turpis, feugiat vitae euismod in, porttitor ac ligula. Donec accumsan ligula eros. Nunc nisi velit, condimentum ut ornare vel, bibendum vitae magna. Quisque faucibus, turpis a fermentum tempor, elit lorem elementum mi, accumsan dictum arcu dolor in tortor. Aenean feugiat sagittis lacinia.
Sed semper urna sed nibh faucibus sollicitudin. In rutrum, nisl nec fermentum accumsan, dolor leo dapibus est, nec semper nulla est eu ante. Quisque id magna sed quam pellentesque dapibus vitae at massa. Nulla facilisi. Etiam molestie enim ac tortor facilisis eget pretium ligula facilisis. Phasellus luctus dolor nec ligula placerat sit amet bibendum nunc mattis. Nulla ac ornare sem. Suspendisse potenti. Suspendisse sed arcu vel mauris viverra vehicula nec eget nibh. Vivamus elementum, urna a posuere vulputate, turpis enim tincidunt nulla, eu tempor sem ante eu nunc. Nam at velit a tellus luctus rhoncus sed eu metus. Proin nec mi et purus faucibus accumsan. Cras accumsan molestie sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Mauris auctor volutpat nisi, eget mattis dolor faucibus in. Donec pretium dapibus molestie. Sed volutpat ornare leo, sed auctor erat venenatis ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum sit amet risus metus. Nam eget nibh non libero posuere feugiat non gravida magna. In neque tellus, elementum in dictum quis, adipiscing quis ante. Cras non hendrerit dolor. Sed fermentum tempus porttitor.
Phasellus id velit sem. Suspendisse a metus mi. Maecenas et velit justo, eget hendrerit augue. Donec quis turpis sed libero interdum iaculis at eu eros. Maecenas quis tellus turpis, varius aliquet tellus. Phasellus nec mauris nibh. Donec at tellus augue, nec faucibus eros. Etiam tempor lobortis tortor in tristique. Ut ullamcorper ullamcorper lobortis. Proin eleifend blandit mi a tempus. Mauris adipiscing pulvinar egestas. Nulla ultricies ipsum id orci consequat consectetur. Sed tincidunt porttitor cursus. Nam tincidunt quam id quam sodales non rutrum nibh molestie. Aenean interdum tellus tincidunt orci venenatis auctor. Donec felis nisi, eleifend eget auctor id, fringilla vel lorem.
Donec eu felis quis mi porttitor congue. Vivamus lacinia libero sed felis congue eget feugiat quam tincidunt. Nullam quis erat purus. Nullam tristique justo metus, at lobortis enim. Praesent et auctor lorem. Aenean convallis eros sed ante consectetur ac feugiat magna condimentum. Donec lobortis varius lectus congue accumsan.
Suspendisse cursus turpis vel arcu rutrum pharetra. Aenean sed nisl in eros vulputate luctus. Aliquam erat volutpat. Sed porttitor accumsan leo, at ultricies nisi dictum sit amet. Suspendisse potenti. In mollis, lorem nec vestibulum dictum, orci elit feugiat tortor, sit amet imperdiet ante ipsum in massa. Integer ut neque ac magna sollicitudin aliquam ac non lectus. Nam non elementum lorem. Quisque quis erat sed leo molestie venenatis. Donec pulvinar porta mauris, vitae condimentum mi congue vel.
</p></div>
<div id="right">Правый блок</div>
<div id="clear">
</div>
<div id="footer">Подвал сайта</div>
</div>
</body>
</html>
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Вы сами ограничили высоту блока в процентах, поэтому фиксированный div не растягивается. Либо уберите, либо используйте min-height для задания высоты.
al_im
Новичок
Дата регистрации:
20.05.2012 18:25:19
Сообщений: 16
Спасибо, свойство min-height выручило. А можно сделать так что бы при растягивании блока с контентом левый блок тоже тянулся? Заранее благодарю.
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Поместить оба блока в общий контейнер и задать левому блоку position:absolute и height:100%
al_im
Новичок
Дата регистрации:
20.05.2012 18:25:19
Сообщений: 16
Сделал как Вы сказали, левый блок чуть спустился вниз и "застрял", пробовал убрать все из блока с контентом, и наоборот, еще больше заполнить его. Левый блок вообще не двигается. Вот код:
<html>
<head>
<meta http-equiv="content-type" content="charset=windows-1251; text/html;">
<link href="sample.css" type="text/css" rel="stylesheet">
<title>Мой сайт</title>
</head>
<body>
<div id="all">
<div id="header">Шапка сайта
<div id="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
</ul>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
</ul>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
</ul>
</ul>
</div></div>
<div id="container">
<div id="left">Левый блок</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac mollis sapien. Maecenas tempus luctus eros at posuere. Donec elementum malesuada euismod. Curabitur bibendum dignissim leo, fringilla accumsan urna imperdiet quis. Curabitur in dui eros, quis condimentum tellus. Vestibulum id diam elit, sit amet luctus neque. Fusce mattis semper libero, nec imperdiet velit imperdiet eu.
Morbi pulvinar semper sem. Integer non leo ut metus dictum mattis ac id sapien. Duis mattis dapibus blandit. Phasellus quis eros non velit aliquam tincidunt in nec quam. Maecenas nisi turpis, euismod sed placerat eget, porttitor a nisi. Donec sem erat, venenatis sodales lacinia non, adipiscing adipiscing libero. Morbi eget sem nunc. Nulla facilisi. Maecenas felis est, ultrices sed malesuada vitae, vulputate scelerisque turpis. Aliquam eu urna tellus, non consectetur nulla. Proin fermentum sagittis lacus. Cras hendrerit mollis libero vitae molestie.
Ut scelerisque orci nec orci vehicula eget rhoncus elit lacinia. Integer eget erat leo, sed elementum odio. Donec scelerisque nisl id diam consectetur tincidunt pharetra lectus hendrerit. Proin a ultricies ante. Nunc rutrum enim et ipsum interdum et adipiscing est rutrum. Nam et quam lorem, sed euismod nulla. Praesent rhoncus ornare lacinia. Cras porta risus nec turpis tempor commodo quis eget nibh. Cras arcu magna, feugiat at accumsan quis, elementum non mi. Integer posuere molestie orci vitae posuere. Curabitur viverra nulla nibh. Fusce vitae diam quam, vitae ullamcorper risus.
Donec ac justo enim. Aliquam viverra ultricies justo quis posuere. Donec lobortis mattis euismod. Cras tempor porttitor odio, sed euismod risus mattis ac. Etiam in posuere nisi. Proin nec dolor id libero hendrerit vestibulum. Sed at est erat, vel lacinia orci.
Morbi sem urna, consequat in congue eget, rhoncus non nisl. Nullam lacinia nibh in est fringilla lobortis non at enim. Suspendisse leo metus, feugiat in commodo nec, iaculis porttitor magna. Praesent sapien lacus, mattis sed molestie nec, porta in nibh. Proin eu felis erat, eget pellentesque velit. Quisque ante massa, pretium sit amet molestie malesuada, molestie quis elit. Cras ipsum turpis, feugiat vitae euismod in, porttitor ac ligula. Donec accumsan ligula eros. Nunc nisi velit, condimentum ut ornare vel, bibendum vitae magna. Quisque faucibus, turpis a fermentum tempor, elit lorem elementum mi, accumsan dictum arcu dolor in tortor. Aenean feugiat sagittis lacinia.
Sed semper urna sed nibh faucibus sollicitudin. In rutrum, nisl nec fermentum accumsan, dolor leo dapibus est, nec semper nulla est eu ante. Quisque id magna sed quam pellentesque dapibus vitae at massa. Nulla facilisi. Etiam molestie enim ac tortor facilisis eget pretium ligula facilisis. Phasellus luctus dolor nec ligula placerat sit amet bibendum nunc mattis. Nulla ac ornare sem. Suspendisse potenti. Suspendisse sed arcu vel mauris viverra vehicula nec eget nibh. Vivamus elementum, urna a posuere vulputate, turpis enim tincidunt nulla, eu tempor sem ante eu nunc. Nam at velit a tellus luctus rhoncus sed eu metus. Proin nec mi et purus faucibus accumsan. Cras accumsan molestie sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Mauris auctor volutpat nisi, eget mattis dolor faucibus in. Donec pretium dapibus molestie. Sed volutpat ornare leo, sed auctor erat venenatis ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum sit amet risus metus. Nam eget nibh non libero posuere feugiat non gravida magna. In neque tellus, elementum in dictum quis, adipiscing quis ante. Cras non hendrerit dolor. Sed fermentum tempus porttitor.
Phasellus id velit sem. Suspendisse a metus mi. Maecenas et velit justo, eget hendrerit augue. Donec quis turpis sed libero interdum iaculis at eu eros. Maecenas quis tellus turpis, varius aliquet tellus. Phasellus nec mauris nibh. Donec at tellus augue, nec faucibus eros. Etiam tempor lobortis tortor in tristique. Ut ullamcorper ullamcorper lobortis. Proin eleifend blandit mi a tempus. Mauris adipiscing pulvinar egestas. Nulla ultricies ipsum id orci consequat consectetur. Sed tincidunt porttitor cursus. Nam tincidunt quam id quam sodales non rutrum nibh molestie. Aenean interdum tellus tincidunt orci venenatis auctor. Donec felis nisi, eleifend eget auctor id, fringilla vel lorem.
Donec eu felis quis mi porttitor congue. Vivamus lacinia libero sed felis congue eget feugiat quam tincidunt. Nullam quis erat purus. Nullam tristique justo metus, at lobortis enim. Praesent et auctor lorem. Aenean convallis eros sed ante consectetur ac feugiat magna condimentum. Donec lobortis varius lectus congue accumsan.
Suspendisse cursus turpis vel arcu rutrum pharetra. Aenean sed nisl in eros vulputate luctus. Aliquam erat volutpat. Sed porttitor accumsan leo, at ultricies nisi dictum sit amet. Suspendisse potenti. In mollis, lorem nec vestibulum dictum, orci elit feugiat tortor, sit amet imperdiet ante ipsum in massa. Integer ut neque ac magna sollicitudin aliquam ac non lectus. Nam non elementum lorem. Quisque quis erat sed leo molestie venenatis. Donec pulvinar porta mauris, vitae condimentum mi congue vel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac mollis sapien. Maecenas tempus luctus eros at posuere. Donec elementum malesuada euismod. Curabitur bibendum dignissim leo, fringilla accumsan urna imperdiet quis. Curabitur in dui eros, quis condimentum tellus. Vestibulum id diam elit, sit amet luctus neque. Fusce mattis semper libero, nec imperdiet velit imperdiet eu.
</p></div>
</div>
<div id="clear">
</div>
<div id="footer">Подвал сайта</div>
</div>
</body>
</html>
CSS:
#all {
margin-left: 130px;
width: 1000px;
height: 600px;
}
#content {
border: 1px solid black;
min-height: 100%;
width: 797;
margin-left: 203px;
}
#content p {
margin-left: 10px;
margin-top: 5px;
}
#header {
border: 1px solid black;
height: 25%;
width: 100%;
margin-bottom: 1px;
}
#left {
border: 1px solid black;
height: 100%;
float: left;
width: 200px;
position: absolute;
}
#container {
min-height: 100%;
width: 997px;
}
#clear {
clear: both;
}
#footer {
margin-top: 1px;
border: 1px solid black;
height: 5%;
width: 100%;
}
#menu {
text-align: center;
}
#menu ul li {
border: 1px solid black;
padding: 5px;
display: inline;
cursor: default;
position: relative;
line-height: 30px;
margin: 2px;
background-color: white;
}
#menu ul li:hover {
background: -moz-linear-gradient(top, #fefcea, #f1da40);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#fefcea), color-stop(100%,#f1da36));
background: -webkit-linear-gradient(top, #fefcea, #f1da40);
background: -o-linear-gradient(top, #fefcea, #f1da40);
background: -ms-linear-gradient(top, #fefcea, #f1da40);
background: linear-gradient(top, #fefcea, #f1da40);
}
li ul {
display: none;
position: absolute;
padding: 5px;
top: 30px;
left: 0px;
}
li:hover ul {
display: block;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
color: brown;
}
Когда полностью убрал все содержимое из блока с контентом увидел что сам блок тоже исчез, хотя насколько я понимаю, смысл свойства min-height, создать минимальную высоту объекта, а если текст не вмещается в объект, тянуть его пока он не вместится.
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Контейнер должен быть с position: relative ещё.
al_im
Новичок
Дата регистрации:
20.05.2012 18:25:19
Сообщений: 16
Все работает. Спасибо!
