Div с текстом, не растягивающимся вертикально внутри обертки

У меня есть обертка внутри заголовка, левого столбца и основного содержимого. Вне обертки я получил нижний колонтитул.Div с текстом, не растягивающимся вертикально внутри обертки

Моя проблема заключается в том, что основное содержание, если текста недостаточно, не растягивается до нижней части страницы. Если я вставляю lorem ipsum и т. Д., Будучи множеством строк, все в порядке, но если я попробую только с несколькими строками, главный div остановится до самого конца оболочки (или, лучше, на конце страницы, перед нижним колонтитулом).

Вот мой HTML код

<?php session_start(); 
unset($_SESSION['message']); 
?> 
<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="../css/stili.css" type="text/css" /> 
<script type="text/javascript" src="../script/scripts.js"></script> 

<meta charset="utf-8"/> 
<title></title> 
<style> 

</style> 
</head> 
<body> 
<div id="wrapper"> 

<div id="header"> 
    <?php 
    include('../php/header.php'); 
    ?> 
</div> 

<div id="leftcolumn"> 
<?php 
    include('../php/leftcolumn.php'); 
?> 
</div> 
<div id="main" >Welcome to our site 

...Some text, but not enough to stretch to the end of page... 


</div> 
     <div style="clear: both"></div> 
</div> 

<div id="footer">Copyright 2013</div> 

</body> 
</html>

А вот CSS

html, 
body { 
padding:0; 
margin:0; 
height:100%; 
} 

#wrapper { 
min-height:100%; 
height:auto; 
margin:0 auto -30px; 
width:950px; 
background-color:#E3AA56; 

} 

#main { 
float:right; 
width:680px; 
padding:10px; 
background:#E0CD90; 
text-align:justify; 
overflow: auto; 

} 

#main a{ 
font-size:40px; 
} 

#footer{ 
border-top: 2px solid #CCCCCC; 
width:950px; 
margin:auto ; 
height:30px; 
background:#ee5; 
clear: both; 
}

Спасибо совет всем, что поможет найти проблему!

источник

2013-05-13 Sanci

Почему нам нужно столько CSS, если только небольшая часть имеет значение? ;) Это затрудняет людям помощь. Подумайте о минимизации кода. – 2013-05-13 22:02:39

Извините, вы правы. Я отредактировал CSS и оставил самую важную часть, основную, обертку, тело и нижний колонтитул. – Sanci

Как вы хотите, чтобы это было так? Если нет, то, пожалуйста, дайте мне знать, и я пересмотрю свой ответ.

UPDATE: -

#main { 
height:100% 
} 

#wrapper { 
height:100% 
} 
#leftcolumn { 
padding:10px; 
height:100%; 
}

Это должно работать.

UPDATE 2: -

#main { 
height:100%; 
} 

#wrapper { 
height:100%; 
overflow:hidden; 
min-height:500px; (you can change this to your liking) 
} 

#footer { 
position:relative; 
}

Это должно дать вам результаты, которые вы ожидаете. Не нужно добавлять мой предыдущий стиль, просто используйте его сейчас.

источник

2013-05-13 22:07:28

Ну, главный div не должен устанавливаться по умолчанию, потому что теоретически он может меняться со страницы на страницу. Я использую этот макет не только для домашней страницы, но даже для других страниц. Если я установил высоту, я буду ограничен по содержанию, я мог бы поставить там ... правильно? – Sanci

Пожалуйста, посмотрите мой обновленный ответ и измените только то, что я там указал :) Кроме того, макет остается тем же, даже если вы попробуете его на разных разрешениях! –

Теперь установка основной высоты на 100% заставила главного div перейти к нижнему колонтитулу:/ – Sanci

Разделение страницы на несколько столбцов, автоматически растягивающее высоту окна просмотра, является постоянной темой. Просто Google для этого, есть несколько решений на основе CSS.

Проблема заключается в том, что высота окружающих ящиков не определена (html, body, wrapper в вашем случае). Вы можете добавить только «стиль», если это также размер для родителя.

Один weired решение, чтобы установить стиль HTML объекта:

<html style="overflow:hidden;clip: 
      rect(auto);height:100%;;margin:0px;padding:0px; 
      background-color:white;">

(да, это не запрещено, вы можете сделать это, и это даже IE 6 и 7 доказано ...) и

#wrapper { 
min-height:100%; 
height:100%'; 
margin:0 auto -30px; 
width:950px; 
background-color:#E3AA56; 
overflow: hidden; /* not sure if you want that */ 
}

источник

2013-05-13 22:22:42

Ну, ваш совет не решил мою проблему, может быть, я объяснил моя проблема хорошо. Я бы хотел, чтобы главный div шел до конца страницы, а не заканчивался текстом, оставляя пустое пространство под div и показывая обертку: / – Sanci

Вот ключей к вашим проблемам, вы должны смотреть и реализовать, однако вы хотите:

html, body { 
height: 100%; 
min-height: 100% /* for firefox */ 
} 

#wrapper, #leftcolumn, #main { 
height: 100%; 
}

источник

2013-05-13 22:27:07 Xarcell

Вам не нужно добавлять высоту в обертку, чтобы получить высоту, основанную на содержимом внутри обертки :)

источник

2013-05-13 23:36:08 edonbajrami

Div с текстом, не растягивающимся вертикально внутри обертки

ответ

Смежные вопросы