Сведения о вопросе

Drake

16:03, 1st July, 2020

Теги

html   css    

Установка высоты div в HTML с CSS

Просмотров: 468   Ответов: 13

Я пытаюсь разложить страницу в виде таблицы с двумя столбцами. Я хочу, чтобы самый правый столбец был закреплен справа от страницы, и этот столбец должен иметь отчетливый цвет фона. Содержимое в правой части почти всегда будет меньше, чем в левой. Я хотел бы, чтобы 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>

Edit: я согласен, что этот пример очень похож на таблицу, и фактическая таблица была бы прекрасным выбором. Но моя страница "real" в конечном итоге будет менее табличной, и я просто хотел бы сначала освоить эту задачу!

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

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



  Сведения об ответе

SSESION

18:03, 1st July, 2020

Гм...

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

На самом деле, высота 100% не будет работать в большинстве проектных ситуаций - это может быть коротким, но это не очень хороший ответ. Google "any column longest" макеты. Самый лучший способ-это поместить левый и правый кольцы внутри обертки div, плавающие левый и правый кольцы, а затем плавающие обертку - это делает его растянутым на высоту внутренних контейнеров - затем установить фоновое изображение на внешней обертке. Но следите за любыми горизонтальными полями на плавающих элементах, если вы получите IE "double margin float bug".


  Сведения об ответе

baggs

18:03, 1st July, 2020

Дать это попробовать: 

html, body,

#left, #right {

  height: 100%

}



#left {

  float: left;

  width: 25%;

}

#right {

  width: 75%;

}
<html>

  <body>

    <div id="left">

      Content

    </div>

    <div id="right">

      Content

    </div>

  </body>

</html>


  Сведения об ответе

P_S_S

18:03, 1st July, 2020

Некоторые браузеры поддерживают таблицы CSS, поэтому вы можете создать такой макет, используя различные значения CSS display: table-* . В этой статье (и в одноименной книге) Рэйчел Эндрю есть больше информации о таблицах CSS: все, что вы знаете о CSS, неверно

Если вам нужен согласованный макет в старых браузерах, которые не поддерживают таблицы CSS, вам нужно сделать две вещи:

  1. Сделайте так, чтобы ваш элемент "table row" очистил свои внутренние плавающие элементы.

    Самый простой способ сделать это-установить overflow: hidden , который заботится о большинстве браузеров, и zoom: 1 , чтобы вызвать свойство hasLayout в более старых версиях IE.

    Есть много других способов очистки поплавков, если этот подход вызывает нежелательные побочные эффекты, вы должны проверить вопрос, какой метод 'clearfix' является лучшим и статью о том, чтобы иметь макет для других методов.

  2. Сбалансируйте высоту двух элементов "table cell".

    Есть два способа подойти к этому вопросу. Либо вы можете создать видимость равных высот, установив фоновое изображение на элементе "table row" ( техника искусственных столбцов), либо вы можете сделать так, чтобы высоты столбцов совпадали, давая каждому большое отступление и одинаково большое отрицательное поле.

    Искусственные столбцы-это более простой подход и очень хорошо работает, когда ширина одного или обоих столбцов фиксирована. Другой метод лучше справляется со столбцами переменной ширины (на основе процента или единиц измерения em), но может вызвать проблемы в некоторых браузерах, если вы ссылаетесь непосредственно на содержимое в ваших столбцах (например, если столбец содержит <div id="foo"></div> , а вы связаны с #foo )

Вот пример использования метода заполнения / маржи для балансировки высоты столбцов. 

html, body {

  height: 100%;

}



.row {

  zoom: 1;          /* Clear internal floats in IE */

  overflow: hidden; /* Clear internal floats */

}



.right-column,

.left-column {

  padding-bottom: 1000em;  /* Balance the heights of the columns */

  margin-bottom: -1000em;  /*                                    */

}



.right-column {

  width: 20%;

  float: right;

}



.left-column {

  width: 79%;

  float: left;

}
<div class="row">

  <div class="right-column">Right column content</div>

  <div class="left-column">Left column content</div>

</div>

<div class="row">

  <div class="right-column">Right column content</div>

  <div class="left-column">Left column content</div>

</div>

Эта демонстрация Barcamp Натали Даун также может быть полезна при выяснении того, как добавить дополнительные столбцы и хорошие интервалы и отступы: столбцы равной высоты и другие трюки (именно здесь я впервые узнал о трюке margin/padding, чтобы сбалансировать высоту столбцов)


  Сведения об ответе

ITSME

18:03, 1st July, 2020

Я отказался от строго CSS и использовал немного jquery: 

var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();

if (leftcol_height > rightcol_height)
    rightcol.height(leftcol_height);
else
    leftcol.height(rightcol_height);


  Сведения об ответе

piter

18:03, 1st July, 2020

Вот пример столбцов равной высоты- столбцы равной высоты-revisited

Вы также можете проверить идею "Faux Columns", а также- искусственные столбцы

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


  Сведения об ответе

ASSembler

18:03, 1st July, 2020

У меня была такая же проблема на моем сайте ( бесстыдный плагин ).

У меня был раздел nav "float: right", и основная часть страницы имеет фоновое изображение размером около 250 пикселей, выровненное справа и "repeat-y". Затем я добавил к нему что-то с "clear: both". Вот это свойство W3Schools и CSS clear.

Я поместил клир в нижней части "page"-го класса div. Мой источник страницы выглядит примерно так. 

body
 -> header (big blue banner)
 -> headerNav (green bar at the top)
 -> breadcrumbs (invisible at the moment)
 -> page
     -> navigation (floats to the right)
     -> content (main content)
         -> clear (the quote at the bottom)
         -> footerNav (the green bar at the bottom)
     -> clear (empty but still does something)
 -> footer (blue thing at the bottom)

Я надеюсь, что это поможет :)


  Сведения об ответе

DAAA

18:03, 1st July, 2020

Нет необходимости писать собственный css, есть библиотека под названием "Bootstrap css", вызывая которую в вашем HTML головном разделе, мы можем добиться многих стилизаций, вот пример: Если вы хотите предоставить два столбца в строке, вы можете просто сделать следующее: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="row">

  <div class="col-md-6">Content</div>

  <div class="col-md-6">Content</div>

</div>

Вот МД стоит для средних устройств,вы можете использовать col-sm-6 для небольших устройств и col-xs-6 для дополнительных небольших устройств


  Сведения об ответе

ЯЯ__4

18:03, 1st July, 2020

Просто пытаюсь помочь здесь, чтобы код был более читабельным.
Помните, что вы можете вставить фрагменты кода, нажав на кнопку вверху с "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>


  Сведения об ответе

prince

18:03, 1st July, 2020

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


  Сведения об ответе

PROGA

18:03, 1st July, 2020

Макет с 2 столбцами немного сложно заставить работать в CSS (по крайней мере, пока CSS3 не станет практичным.)

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

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


  Сведения об ответе

FAriza

18:03, 1st July, 2020

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

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


  Сведения об ответе

baggs

18:03, 1st July, 2020

Для этого достаточно просто использовать свойство css width , чтобы сделать так.

Вот такой пример: 

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>


  Сведения об ответе

FAriza

18:03, 1st July, 2020

Это должно сработать для вас: установите высоту в 100% в вашем css для элементов html и body . Затем вы можете настроить высоту в соответствии с вашими потребностями в div . 

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
}


Ответить на вопрос

Чтобы ответить на вопрос вам нужно войти в систему или зарегистрироваться