Помощь с внутренними полями содержимого полей / отступов - PullRequest
Новая
       0

Помощь с внутренними полями содержимого полей / отступов

1 голос
/ 29 марта 2010

Я работаю над макетом для нового сайта, и у меня возникают проблемы с достижением того, что я хочу с помощью CSS. Прежде всего, я хочу, чтобы все всегда оставалось в поле зрения текущего окна браузера, причем прокрутка была в моем контенте, а не в самом браузере. У меня есть внешний DIV, который действует как моя «оболочка» для сайта, отображаемого по центру, с заданной шириной и 100% высотой окна баузера. Внутри этого я помещаю заголовок, и все это работает как задумано во всех заинтересованных браузерах.

Однако, как только я помещаю свой фактический контент DIV в эту «обертку», я не могу определить, какой именно размер я хочу. Если я просто добавлю поля или отступы, чтобы компенсировать абсолютно позиционированный заголовок, содержимое будет переполнено, и я не смогу установить прокрутку. И если я попытаюсь установить размер напрямую, я не смогу ввести значения, которые сработают, поскольку поля / отступы увеличат размер, и теперь он будет больше, чем текущее окно браузера, и переполнится.

Могут ли люди придумать стили, которые я могу использовать в DIV (-ах) обёртки / контента, чтобы получить желаемый вид? Вот диаграмма, иллюстрирующая внешний вид, который я хочу.

Ответы [ 2 ]

0 голосов
/ 29 марта 2010 
<style>
html, body {
    margin: 0;
    padding: 0;
    text-align: center;
    overflow: hidden; // prevents scroll bars in browser window}
#content_wrap {
    width: 800px; // set this to whatever you want
    margin: 0 auto; // centers the div
    text-align: left; 
    height: 100%; 
    position: relative; // basis for absolute positioning}
#header {
    position: absolute; 
    top: 0; 
    left: 20px; 
    width: 760px;}
#content {
    position: absolute; 
    left: 0; 
    top: 20%; 
    height: 80%; 
    overflow: scroll; 
    overflow-x: hidden;}
</style>

Сложность этого подхода и любого, о чем я могу подумать, заключается в том, что без CSS-выражений вы не можете увеличить высоту #content div до нижней части экрана, кроме как в процентах. Проблема в том, что у вашего заголовка не будет фиксированного количества места для работы. Не существует CSS-представления для вашего идеального набора атрибутов "#content div с полем 200px вверху и расширением до низа страницы".

Вы можете легко сделать это с помощью JS.

0 голосов
/ 29 марта 2010

Следующее предполагает, что у вас есть фиксированная высота для вашего заголовка (не в процентах). В этом примере используются значения px, чтобы упростить проверку с помощью Firebug, но он работает так же с em. 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Title</title>

    <style type="text/css">

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

        #wrapper {
            position:relative;
            width: 400px;
            height: 100%;
            margin: 0 auto 0 auto;
        }
        #header {
            position:absolute;
            margin-top:0;
            height: 70px;
            width: 400px;
            background-color: #ccc;
        }
        #content {
            position: absolute;
            top: 70px;
            bottom: 0;
            width: 400px;
            overflow: auto;
            background-color: #99c;
        }
    </style>

</head>
<body>
    <div id="wrapper">
        <div id="header">Header</div>
        <div id="content">
            Content<br/>
            Content<br/>
            Content<br/>
            Content<br/>
            Content<br/>
            Content
        </div>
    </div>
</body>
</html>

Важным моментом является то, что #content вообще не использует height - вместо него используется комбинация top и bottom.

Примечание: я уверен, что для IE 6 потребуются изменения ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...