Вопросы Теги

Установка высоты отделения в HTML с CSS

Многие объяснения уже присутствуют, чтобы объяснить, как это происходит и как это исправить, но вы также должны следовать рекомендациям, чтобы избежать NullPointerException вообще.

См. также: A хороший список лучших практик

Я бы добавил, очень важно, хорошо использовать модификатор final. Использование "окончательной" модификатор, когда это применимо в Java

Сводка:

  1. Используйте модификатор final для обеспечения хорошей инициализации.
  2. Избегайте возврата null в методы, например, при возврате пустых коллекций.
  3. Использовать аннотации @NotNull и @Nullable
  4. Быстрое завершение работы и использование утверждений, чтобы избежать распространения нулевых объектов через все приложение, когда они не должен быть пустым.
  5. Сначала используйте значения с известным объектом: if("knownObject".equals(unknownObject)
  6. Предпочитают valueOf() поверх toString ().
  7. Используйте null safe StringUtils StringUtils.isEmpty(null).

36
задан Nhan 30 November 2016 в 09:31
поделиться

10 ответов

Гм...

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

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

22
ответ дан Ulf Gjerdingen 27 November 2019 в 06:03
поделиться

Дайте этому попытку: 

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>
10
ответ дан Nhan 27 November 2019 в 06:03
поделиться

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

, можно также проверить идею "Поддельных Столбцов" также - , Поддельные Столбцы

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

3
ответ дан Rich Reuter 27 November 2019 в 06:03
поделиться

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

у меня был военно-морской раздел "плавание: право" и основная часть страницы имеют фоновое изображение приблизительно 250 пкс через выровненный к праву и "повторению-y". Я тогда добавил что-то с "ясным: оба" к нему. Вот W3Schools и CSS ясное свойство .

, которое я поместил, ясное у основания "страницы" классифицировало отделение. Мой источник страницы выглядит примерно так. 

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)

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

2
ответ дан Teifion 27 November 2019 в 06:03
поделиться

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

0
ответ дан GateKiller 27 November 2019 в 06:03
поделиться

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

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

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

0
ответ дан Dan Herbert 27 November 2019 в 06:03
поделиться

Я могу думать о 2 опциях

  1. Использование JavaScript для изменения размеров меньшего столбца на загрузке страницы.
  2. Фальшивка равные высоты путем установки background-color для столбца на контейнере <div/> вместо этого (<div class="separator"/>) с repeat-y
0
ответ дан Linus Caldwell 27 November 2019 в 06:03
поделиться

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

Вот пример: 

<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>
0
ответ дан Ulf Gjerdingen 27 November 2019 в 06:03
поделиться

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

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

  1. Очистить элемент "table row" от своих внутренних плавающих элементов.

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

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

  2. Сбалансируйте высоту макета. два элемента "ячейка таблицы".

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

    Поддельные столбцы - это более простой подход, который очень хорошо работает, когда ширина одного или обоих столбцов фиксирована. Другой метод лучше справляется со столбцами переменной ширины (в процентах или единицах em), но может вызвать проблемы в некоторых браузерах, если вы напрямую ссылаетесь на контент в своих столбцах (например, если столбец содержит

    , и вы связались с #foo )

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

 html, body {height: 100 %; } .row {масштаб: 1; / * Очистить внутренние поплавки в IE * / overflow: hidden; / * Очистить внутренние числа с плавающей запятой * /} .right-column, .left-column {padding-bottom: 1000em; / * Сбалансируем высоту столбцов * / margin-bottom: -1000em; / * * /} .right-column {ширина: 20%; float: right; } .left-column {ширина: 79%; плыть налево; } 
 
 
                  

                  

                     
                     
8

                  

                  

                  

                     ответ дан                      27 November 2019 в 06:03 
                  

                  поделиться

Я отказался от строго 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);
5
ответ дан 27 November 2019 в 06:03
поделиться
© 2017 - 2020 Вопросы и ответы по программированию