Div изменения размера не работает правильно

Я пишу некоторый CSS код для школьного сайта, который выглядит как этотDiv изменения размера не работает правильно

body{ 
background:#000099 url('repeat.png') repeat-x; 
margin-bottom:50px; 
} 



div.wsite-theme{ 
background-color:#FFFFFF; 
border-top:5px solid #AAAAAA; 
} 

div.wsite-header{ 
background:#DDDDDD; 
border-radius:5px; 
} 

#wrapper { 
width:960px; 
margin:0pt auto; 
} 

#content{ 
width:850px; 
min-height:694px; 
position:absolute; 
left:98px; 
top:150px; 
} 

#content-main{ 
width:100%; 
min-height:594px; 
position:absolute; 
top:0px; 
} 

#navigation{ 
min-height:1px; 
position:absolute; 
left:98px; 
top:90px; 
line-height:2px; 
padding:10px 10px; 
width:850px; 
} 

#header{ 
width:850px; 
height:150px; 
position:absolute; 
top:5px; 
left:98px; 
} 

#footer{ 
width:100%; 
height:100px; 
background:#DDDDDD; 
position:absolute; 
bottom:0px; 
border-top:5px solid #AAAAAA; 
}

с HTML, который выглядит следующим образом:

<html> 
<head> 
<title>{title}</title> 
<link rel="stylesheet" type="text/css" href="main-style.css" /> 
</head> 
<body> 
<div id="wrapper"> 
<div id="header" class="wsite-header"> 
<h1 class="title1">{title}</h1> 
</div> 
<div id="navigation"> 
{menu} 
</div> 
<div id="content"> 
<div id="content-main" class="wsite-theme"> 
{content} 
</div> 
<div id="footer"> 
{footer} 
</div> 
</div> 
</div> 
</body> 
</html>

(игнорировать содержимое в фигурных наручах. это для редактора веб-сайта, в котором наша школа использует нас) Итак, когда я перехожу на свою страницу и печатаю содержимое, оно изменяется и выходит за нижний колонтитул. Однако то, что я намереваюсь сделать, это толкать нижний колонтитул вниз, поскольку он изменяет размеры для соответствия содержимому. Раньше он вел себя так, так что я делаю неправильно?

EDIT: я предполагаю, что я не был достаточно ясно, во-первых, я хочу родителю #content DIV, чтобы изменить размер с содержанием основного DIV, чтобы нижний колонтитул выталкивается вниз

источник

2012-02-20 user1130772

Почему вы используете абсолютную позицию на всех? Удалите все из position: absolute со всех ваших DIV, которые они не являются необходимыми. Расположите их с использованием полей, и у вас не будет проблем с изменением размера DIV.

Как упоминал Мэтью, когда вы используете свойство position: absolute, он берет этот элемент из потока документа, поэтому он не будет влиять на элементы вокруг него. Все ваши DIV находятся в том порядке, в котором вы хотите, чтобы они отображались, нет необходимости в абсолютном позиционировании для любого из них.

Просто вынули позиционирование и перепутались с прокладкой обертки, чтобы получить ту же самую вещь, которую вы пытаетесь - http://jsfiddle.net/n3Xqx/

источник

2012-02-20 03:36:11

Не используйте position: absolute;, он берет вещи регулярного потока документов.

EDIT: Если вам нужно, чтобы дать более вертикальное расстояние между областями заголовка/нижнего колонтитула/контента, а затем использовать margin

источник

2012-02-20 03:04:56 Matthew

Как я могу поместить это же без абсолютного хотя? – user1130772

Добавить позицию по отношению к обертке. Замените позицию абсолютной на относительную для содержания и нижнего колонтитула. См Я обновил CSS ниже

#wrapper { 
width:960px; 
margin:0pt auto; 
position:relative; 
} 

#content{ 
width:850px; 
min-height:694px; 
left:98px; 
top:150px; 
position:relative; 
} 
#content-main{ 
width:100%; 
min-height:594px; 
position:relative; 
top:0px; 
} 
#footer{ 
width:100%; 
height:100px; 
background:#DDDDDD; 
bottom:0px; 
border-top:5px solid #AAAAAA; 
position:relative; 
}

источник

2012-02-20 03:15:28 Dips

, что делает нижний колонтитул над содержимым. я хочу его внизу, и он по-прежнему не исправляет мою проблему, которая заключается в том, что '# content' не расширяется, когда' # content-main'. Кроме того, это делает мой заголовок неуместным, и моя панель навигации – user1130772

Я забыл удалить абсолютную позицию на нижнем колонтитуле и содержании, поэтому нижний колонтитул был поверх содержимого. Я обновил css выше – Dips

Добавить позицию относительно в # content-main также вместо абсолютного, тогда она будет работать. См. Jsfiddle http://jsfiddle.net/tQeDz/ – Dips

Div изменения размера не работает правильно

ответ

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