автоматическая регулировка высоты div в макете страницы - PullRequest
Новая
       0

автоматическая регулировка высоты div в макете страницы

0 голосов
/ 13 июля 2010

Я пытаюсь создать веб-страницу, используя макет без таблицы; Тем не менее, я испытываю проблемы, когда дело доходит до высоты страницы. Я использовал jquery accordion, чтобы минимизировать использование полос прокрутки на странице. Тем не менее, я испытываю перекрытие div'ов, когда я сворачиваю аккордеон. Аккордеонная часть перекрывает нижний край страницы и накладывается на нижний колонтитул. Как я могу автоматически регулировать высоту страницы, не перекрывая другие элементы на странице.

как будто вы можете прикрепленное изображение является основным макетом, который я сделал. контентная часть страницы будет динамически заполняться; поэтому мне нужно автоматически настроить содержимое div с помощью css

Спасибо! Нхойти альтернативный текст http://img13.imageshack.us/img13/9438/layoutfq.jpg

вот HTML-код, который я сделал; не могли бы вы помочь мне исправить это? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body
{
    margin:0px;
    padding:0px;
    }

#pageholder
{
    width:980px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    border:solid 1px #000;
    }

#header
{
    width:978px;
    height:120px;
    border:solid 1px red;
    text-align:center;
    }

#navigation
{
    width:200px;
    height:720px;
    margin:5px;
    border:solid 1px cyan;
    text-align:center;
    }


#contents
{
    width:700px;
    height:720px;
    margin:5px;
    margin-left:270px;
    margin-top:-724px;
    border:solid 1px blue;
    text-align:center;
    }

#footer
{
    width:970px;    
    height:50px;
    border:solid 1px green;
    text-align:center;
}
</style>
</head>

<body>
<div id="pageholder">

<div id="header">header</div>
<div id="navigation">navigation</div>
<div id="contents">contents</div>
<div id="footer">footer</div>

</div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 13 июля 2010

Есть несколько вещей, которые следует иметь в виду при работе с высотой страницы:

Прежде всего, по умолчанию, контент обычно будет отображаться, если он выходит за пределы заданной высоты своего контейнера, поэтому для правильной реализации прокрутки у вас должно быть overflow-y:scroll в #navigation и #content divs.

Во-вторых, вы устанавливаете немного высоты. Верхний колонтитул имеет высоту 120px, плюс навигацию с разрешением 720 + 10 (5 сверху, 5 снизу), перед нижним колонтитулом, который добавляет еще 50. Это всего 900, что очень много. Обычное разрешение сейчас составляет 1280x1024, но вы должны иметь в виду, что браузер ест много высоты; вероятно, в районе 200px. Возможно, вы назначаете слишком большую высоту вашей странице.

В-третьих, назначить массивную отрицательную верхнюю границу для вашего #contents div немного странно. Отрицательное значение для margin-top перемещает элемент вверх по странице, поэтому браузеру нужно сделать так, чтобы элемент #contents переместился на 724 пикселя вверх, что должно сделать его более чем на половину высоты верхней части экрана. Это то, что вы собирались сделать?

Наконец, обычно нет необходимости указывать высоту для контейнеров. По умолчанию, без стиля высоты, браузер достаточно умен, чтобы сделать ваши контейнеры подходящего размера и не перекрывать их. Вполне возможно, что все, что вам нужно сделать, это удалить стили высоты и отрицательного поля на верхушке полей #contents и #navigation, чтобы решить вашу проблему, если только вам действительно не нужно, чтобы навигация или контент были именно такой высоты.

0 голосов
/ 13 июля 2010

Если у вас есть какие-то правила CSS для плавания, вы должны будете не забыть очистить: оба после рассматриваемого div. Это должно остановить перекрытие (если вы используете float и не очистили его). Вы можете сделать что-то ссылку: 

<br style="clear:both">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...