Как занять все пространство в div при работе с колонтитулом min-height - PullRequest
Новая
       3

Как занять все пространство в div при работе с колонтитулом min-height

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

Я считаю, что это вопрос новичка по CSS. Я использую метод, описанный в http://www.xs4all.nl/~peterned/examples/csslayout1.html, чтобы зафиксировать верхний и нижний колонтитулы.

Чего бы я хотел сейчас добиться - это двух столбцов внутри содержимого div. Левый из 200px и правый, занимающий всю ширину.

К сожалению, я не могу правильно отобразить левый и правый div: они просто не растут вертикально, и если я сделаю правильный div "width: 100%", он окажется ниже левого. *

Какой трюк, чтобы левый и правый div занимали все пространство внутри содержимого div?

Файл layout1.css является оригинальным. Я только что добавил две записи: #left и # right

layout1.css: 

/**
 * 100% height layout with header and footer
 * ----------------------------------------------
 * Feel free to copy/use/change/improve
 */
html,body {
    margin: 0;
    padding: 0;
    height: 100%; /* needed for container min-height */
    background: gray;
    font-family: arial, sans-serif;
    font-size: small;
    color: #666;
}

h1 {
    font: 1.5em georgia, serif;
    margin: 0.5em 0;
}

h2 {
    font: 1.25em georgia, serif;
    margin: 0 0 0.5em;
}

h1,h2,a {
    color: orange;
}

p {
    line-height: 1.5;
    margin: 0 0 1em;
}

div#container {
    position: relative; /* needed for footer positioning*/
    margin: 0 auto; /* center, not in IE5 */
    width: 750px;
    background: #f0f0f0;
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treaded as min-height*/
    min-height: 100%; /* real browsers */
}

div#header {
    padding: 1em;
    background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom: 6px double gray;
}

div#header p {
    font-style: italic;
    font-size: 1.1em;
    margin: 0;
}

div#content {
    padding: 1em 1em 5em; /* bottom padding for footer */
}

div#content p {
    text-align: justify;
    padding: 0 1em;
}

div#footer {
    position: absolute;
    width: 100%;
    bottom: 0; /* stick to bottom */
    background: #ddd;
    border-top: 6px double gray;
}

div#footer p {
    padding: 1em;
    margin: 0;
}

// added the following:

div#left {
   border: 1px solid red;
   width: 200px;
   float: left;
   min-height: 100%;
   height: 100%;
   padding-left: 10px;
   margin-right: 10px;
}

div#right {
   border: 1px solid blue;
   float: left;
   min-height: 100%;
   height: 100%;
   padding-left: 10px;
   margin-right: 10px;
}

layout.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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CSS Layout - 100% height</title>
    <link rel="stylesheet" type="text/css" href="layout1.css" />
</head>
<body>

    <div id="container">

        <div id="header">
            <h1>header</h1> 
        </div>

        <div id="content">
                   <div id="left">
                       left column
                   </div>
                   <div id="right">
                       right column
                   </div>
        </div>

        <div id="footer">
            <p>
                footer
            </p>
        </div>
    </div>
</body>

Ответы [ 2 ]

1 голос
/ 14 октября 2010

На всякий случай, если кто-нибудь еще наткнется на этот вопрос, как я. Это то, что я закончил. 

<div class="left">
    text
</div>
<div class="right">
    text
</div>

.left {
    float: left;
    width: 200px;
}
.right {
    margin-left: 200px;
}

А для более простых случаев (например, когда вам не нужна рамка для правого элемента), вам даже не нужно указывать левую ширину дважды: http://jsfiddle.net/j8T9v/1/

Другой пример, без настройки ширины вообще. Левый элемент занимает столько места, сколько ему нужно, правый - остальное: http://jsfiddle.net/j8T9v/2/

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

Я обычно делаю это, используя свойства float и padding.

HTML: 

<div id="leftCol">
   content
</div>
<div id = "rightCol">
   content
</div>

CSS: 

#leftCol {
    width: 200px;
}

#rightCol {
    width: 100%;
    float: right;
    padding-left: 200px;
}

Должно работать.

Таким образом, вы используете float и padding, чтобы поместить div рядом друг с другом.

Вам может понадобиться: 

position: absolute;
top: 0px;
right: 0px;

в вашем стиле #rightCol CSS (не проверено, кстати ... из памяти)

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

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

...