Изменение размера Div не работает правильно - PullRequest
Новая
       2

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

0 голосов
/ 20 февраля 2012

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

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>

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

РЕДАКТИРОВАТЬ: я думаю, сначала я не был достаточно ясен, я хочу, чтобы родительский div #content изменил размеры с основным содержимым div, чтобынижний колонтитул опущен вниз

Ответы [ 3 ]

1 голос
/ 20 февраля 2012

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

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

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

1 голос
/ 20 февраля 2012

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

РЕДАКТИРОВАТЬ: если вам нужно увеличить интервал по вертикали между областями верхнего / нижнего колонтитула / содержимого, используйте margin

0 голосов
/ 20 февраля 2012

Добавить положение относительно оболочки. Замените положение абсолютное на относительное для содержимого и нижнего колонтитула. Смотрите, я обновил 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;
}
...