Создание div с переменной высотой по вертикали - PullRequest
0 голосов
/ 13 сентября 2011

как на скриншоте:

http://oi53.tinypic.com/m8jszm.jpg

Я хочу создать <div>, который расположен «x» пикселей сверху, но по существу «расширяется» вертикально, чтобы соответствоватьвсе, что находится в данной вкладке, а также по горизонтали ширину всей страницы сплошным цветом.По существу, <div>, который игнорирует другие <div>.Снимок экрана объясняет, что я имею в виду лучше.Как мне сделать такой <div> макет?

Ответы [ 2 ]

0 голосов
/ 14 сентября 2011

Стандартный CSS должен сделать эту работу за вас, как если бы вы не установили высоту для div, он автоматически расширится, чтобы соответствовать его содержимому. Вот код, который я быстро набрал, чтобы отобразить идею:

<!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></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href=".css"/>
<style>
body {
    margin: 0 auto;
    padding: 0;
}

p {
    margin: 0 auto;
    padding: 0;
}

.topstuff {
    height: 200px;
    background-color: #333333;
    margin: 0 auto;
    padding: 0;
}

.contentContainer {
    width: 100%;
    background-color: #ff0000;
    margin: 0 auto;
    padding: 0;
}

.content {
    width: 1000px;
    margin: 0 auto;
    padding: 0;
}

.footer {
    height: 200px;
    background-color: #00ff00;
    margin: 0 auto;
    padding: 0;
}

</style>

</head>
<body>
<div class="topstuff"></div>
<div class="contentContainer">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper placerat ligula volutpat aliquam. Maecenas vulputate, nibh at iaculis placerat, ligula nisl sodales odio, quis adipiscing purus dolor venenatis nunc. Proin vehicula rhoncus eros tristique aliquet. Vivamus faucibus hendrerit orci eget egestas. Nulla commodo lectus vitae nunc condimentum pharetra. Donec mattis nulla orci. Proin tortor nulla, varius at mollis ac, vestibulum vel leo. Cras ut rutrum sem. Sed vulputate nisi sed leo aliquam ac fermentum tellus porta. Phasellus quis purus et purus sollicitudin tristique a quis sem. Nunc malesuada, eros ac venenatis consequat, erat elit viverra sem, vitae commodo justo orci nec neque. Proin sed aliquam tellus. In tincidunt urna sit amet felis lobortis fringilla elementum massa egestas.</p>

    </div>
</div>

<div class="footer"></div>
</body>
</html>

Просто замените содержимое 'lorerm ipsum и т. Д.' На все, что вы хотите увидеть, содержащее размер изменения div.

Удачи.

0 голосов
/ 13 сентября 2011

Липкий нижний колонтитул смотрит на меня, что вы ищете. Это означает, что у вас есть область содержимого, которая занимает весь экран или, если она содержит больше содержимого, соответствует содержимому. Нижний колонтитул находится либо внизу экрана, либо внизу содержимого

http://www.cssstickyfooter.com/

или выполните поиск липкого нижнего колонтитула в переполнении стека

И немного html, чтобы вы начали

http://jsbin.com/emufot/8/

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