Проблема с Div Layout - PullRequest
Новая
       4

Проблема с Div Layout

1 голос
/ 22 декабря 2009

У меня есть такой HTML-файл (я помещаю только тело страницы): 

<body>
    <form id="form1" runat="server">
    <div class="divBody">
        <div id="divHeader">
        </div>
        <div id="leftColumn">
       Welcome!
        </div>
        <div id="rightColumn">
        </div>
    </div>
    </form>
</body>

И это CSS-файл содержит: 

.divBody {
    border-style: dotted;
    border-width: medium;
    margin: 0 auto;
    width: 1024px;
    height: 768px;
    position: relative;
}
#divHeader {
    width: 100%;
    height: 70px;
    background-color: #000000;
}
#leftColumn {
    width: 33%;
    height: 100%;
    background-color: #FF0000;
    float: left;
}
#rightColumn {
    width: 66%;
    height: 100%;
    background-color: #00FF00;
}

Я хочу заголовок и два столбца. С заголовком все в порядке, но столбцы больше, чем высота divBody, а rightColumn не соответствует 66% ширины divBody.

Что происходит?

Спасибо.

Ответы [ 4 ]

2 голосов
/ 22 декабря 2009

Ваш заголовок имеет фиксированный height: 70px; и толкает столбцы вниз. Вы можете добавить отступ к divBody, чтобы противостоять этому: увидеть его в действии .

Вы также должны сделать правую колонку float, иначе она будет расположена под левой колонкой, а не справа.

Вы должны положиться на Blueprint или YUI 2: Grids . Если вам не нравятся CSS-фреймворки, есть и другие полезные ресурсы, такие как многостолбцовые жидкостные макеты .

Примечание: я не знаю, имелось ли это в виду то, что вы имели в виду, но 33% + 66% == 99%, следовательно, разрыв.

1 голос
/ 22 декабря 2009

Я думаю, вам нужно добавить float-right для rightColumn: 

#rightColumn {
    width: 66%;
    height: 100%;
    background-color: #00FF00;
    float: right;
}

Что касается высоты столбцов: я думаю, что это из-за относительного расположения. Чтобы обеспечить идеальную высоту столбцов, вы можете рассчитать точное количество пикселей, например: 

#leftColumn {
   width: 33%;
   height: 698px;
    background-color: #FF0000;
   float: left;
}
#rightColumn {
    width: 66%;
    height: 698px;
    background-color: #00FF00;
    float: right;
}

(высота тела - высота жатки = 768 - 70 = 698)

но это имеет тот недостаток, что столбцы могут не расти вертикально, если тело увеличивается.

Еще один подход - сохранить колонки на 100%, но приклеить их к верхней части тела. Вы должны дать им относительное положение, чтобы сделать это. Кроме того, вы должны поднять их с учетом занимаемого заголовком пространства: 

#leftColumn {
    width: 33%;
    height: 100%;
    background-color: #FF0000;
    float: left;
    top: -70px;
    position: relative;
}
#rightColumn {
    width: 66%;
    height: 100%;
    background-color: #00FF00;
    float: right;
    top: -70px;
    position: relative;
}
0 голосов
/ 22 декабря 2009

Я думаю, что это может помочь вам:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Вам не нужно использовать систему сетки, и здесь не используются лишние хаваскрипты javascript или css.

0 голосов
/ 22 декабря 2009

Если вы ищете что-то подобное, я настоятельно рекомендую использовать YUI Grids . Они уже выполнили работу по предоставлению макетов (также для разных браузеров), и вам просто нужно заполнить ваши данные. Очень простой в использовании и очень приятный (и установка похожа на вашу).

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

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

...