Установка высоты div в HTML с помощью CSS - PullRequest
Новая
       146

Установка высоты div в HTML с помощью CSS

34 голосов
/ 07 августа 2008

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

.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

Редактировать: Я согласен, что этот пример очень похож на таблицу, и фактическая таблица будет хорошим выбором. Но моя «настоящая» страница со временем станет менее табличной, и я просто хотел бы сначала справиться с этой задачей!

Кроме того, по какой-то причине, когда я создаю / редактирую свои сообщения в IE7, код правильно отображается в режиме предварительного просмотра, но когда я фактически публикую сообщение, форматирование удаляется. Редактирование моего поста в Firefox 2, похоже, сработало, FWIW.

Другое редактирование: Да, я не принял ответ GateKiller. Это действительно хорошо работает на моей простой странице, но не на моей более тяжелой странице. Я исследую некоторые ссылки, на которые вы мне указали.

Ответы [ 14 ]

0 голосов
/ 08 августа 2008

Я могу придумать 2 варианта

  1. Используйте JavaScript для изменения размера меньшего столбца при загрузке страницы.
  2. Подделать равные высоты, установив background-color для столбца контейнера <div/> вместо (<div class="separator"/>) с помощью repeat-y
0 голосов
/ 07 августа 2008

2-колоночный макет немного сложен для работы в CSS (по крайней мере, до тех пор, пока CSS3 не будет практичным).

Плавание влево и вправо будет работать до некоторой точки, но не позволит вам расширить фон. Чтобы фоны оставались сплошными, вам необходимо реализовать метод, известный как «искусственные столбцы», который в основном означает, что у ваших столбцов не будет фонового изображения. Ваши 2 столбца будут содержаться внутри родительского тега. Этот родительский тег имеет фоновое изображение, которое содержит 2 цвета столбца, которые вы хотите. Сделайте этот фон настолько большим, насколько вам нужно (если это сплошной цвет, только сделайте его высотой в 1 пиксель) и сделайте его повторным-y. У AListApart есть отличное пошаговое руководство по тому, что необходимо для его работы.

http://www.alistapart.com/articles/fauxcolumns/

0 голосов
/ 07 августа 2008

Короткий ответ на ваш вопрос заключается в том, что вы должны установить высоту 100% для тега body и html, а затем установить высоту на 100% для каждого элемента div, для которого вы хотите сделать 100% высоты страницы.

0 голосов
/ 07 августа 2008

Просто пытаюсь помочь здесь, чтобы код был более читабельным.
Помните, что вы можете вставить фрагменты кода, нажав на кнопку вверху с «101010». Просто введите свой код, выделите его и нажмите кнопку.

Вот пример: 

<html>
    <body>
    <style type="text/css">
        .rightfloat {
            color: red;
            background-color: #BBBBBB;
            float: right;
            width: 200px;
        }

        .left {
            font-size: 20pt;
        }

        .separator {
            clear: both;
            width: 100%;
            border-top: 1px solid black;
        }
    </style>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...