Как я могу расширить содержимое div моей страницы, чтобы соответствовать экрану? - PullRequest
Новая
       4

Как я могу расширить содержимое div моей страницы, чтобы соответствовать экрану?

1 голос
/ 02 июня 2011

взгляните на это -> страница (смоделировано). 

<!doctype html>
<html>
<head>
<style type=text/css media=all>
*{  margin:0; padding:0; }
#header
{
    background-color:orange;
    position:relative;
    top:0;
}
#header #image
{
    width:120px;
    height:120px;
    background-color:#000;
}
#content
{
    background-color:red;
}

#footer
{
    background-color:green;
}
</style>
</head>
<body>
    <div id=header>
        <div id=image></div><!-- emulating an image -->
    </div>
    <div id=content>
        <p> BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA</p>
    </div>
    <div id=footer>
        <p><center>Copyright</center></p>
    </div>
</body>
</html>

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

Ответы [ 2 ]

2 голосов
/ 02 июня 2011 
#content {
    min-height: 100%
}

(короткий и простой)

Редактировать + объяснение : приведенный выше код работает, если вы хотите убедиться, что длина содержимого div всегда больше, чем страница. Да, это всегда подталкивает нижний колонтитул к следующей видимой странице, но в этом нет ничего плохого, если вы принимаете это.

Для меня лучшее решение - это сделать прокрутку div: 

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

#header {
    position: absolute;
    top: 0; height: 100px;
}

#footer {
    position: absolute;
    bottom: 0; height: 100px;
}

#content {
    position: absolute;
    top: 100px; bottom: 100px;
    overflow: auto;
}

Таким образом, верхний и нижний колонтитулы всегда видны, а размер содержимого фиксирован (с полосой прокрутки, если содержимое переполняется). Не уверен, что это то решение, которое вы хотели, но это вариант.

0 голосов
/ 02 июня 2011

Вам нужны некоторые настройки в CSS и нужно добавить немного кода JQuery.это решит проблему.Вот рабочая демонстрация по JSFIDDLE

CSS: 

*{    margin:0; padding:0; }

#header

{

    background-color:orange;

    position:relative;

    top:0;

}

#header #image

{

    width:120px;

    height:120px;

    background-color:#000;

}



#content

{

    background-color:red;
    width:100%;

}



#footer

{
    position:fixed;
    bottom:0;
    width:100%;
    background-color:green;

}

jQuery: 

$('#content').height(
     $(document).height()-$('#header').height()-$('#footer').height()
);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...