CSS Как установить высоту div 100% минус nPx

199

У меня есть div-обертка, которая содержит 2 div рядом друг с другом. Над этим контейнером у меня есть div, который содержит мой заголовок. Div обертки должен быть 100% минус высота заголовка. Заголовок составляет около 60 пикселей. Это исправлено. Итак, мой вопрос: как мне установить высоту моего div-обертки равной 100% минус 60 пикселей?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

css height

— Мартейн
источник

16

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

— Самарджит Саманта

79

Вот рабочий css, протестированный под Firefox / IE7 / Safari / Chrome / Opera.

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

«overflow-y» не одобрен w3c, но его поддерживает каждый крупный браузер. Два ваших divs #left и #right будут отображать вертикальную полосу прокрутки, если их содержание слишком высокое.

Чтобы это работало в IE7, вам нужно активировать режим, соответствующий стандартам, добавив DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
	*{margin:0px;padding:0px;overflow:hidden}
	div{position:absolute}
	div#header{top:0px;left:0px;right:0px;height:60px}
	div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
	div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
	div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
  <div id="left"><div style="height:1000px">high content</div></div>
  <div id="right"></div>
</div>
</body>

Развернуть фрагмент

— Alsciende
источник

Это работает в FF, но я не получаю его под IE7. Я вижу только код заголовка: <div id = "header"> Заголовок </ div> <div id = "wrapper"> <div id = "left"> Left </ div> <div id = "right"> Справа </ div> </ div>

— Мартейн

Вы запускали режим соответствия стандартам? Я добавлю пример страницы в свой ответ.

— Alsciende

1

Кроме того, если вам нужно расположить эти div в середине страницы или где-либо еще, просто оберните их в div контейнера и установите position: relativeна контейнере. Затем разместите контейнер в любом месте на странице.

— Mrchief

как насчет внутреннего div, например, внутри #left, если я хочу 2 div с соответствующей высотой 40% и 60%?

— TecHunter

Есть ли конкретная причина того, почему px был указан в параметрах 0 value?

— Кассандра

274

В CSS3 вы можете использовать

height: calc(100% - 60px);

— libjup
источник

25

Убедитесь, что у вас есть место до и после знака "-". Firefox должен иметь пробел перед знаком "-".

— Кодлер

7

идеальный. я не знал, что CSS3 может это сделать.

— Том Бич

Вот Это Да! точно то, что я хотел. Спасибо.

— Сандху

1

Это фантастика

— Мирко

47

Если вам нужно поддерживать IE6, используйте JavaScript, поэтому управляйте размером div-оболочки (установите положение элемента в пикселях после считывания размера окна). Если вы не хотите использовать JavaScript, то этого сделать нельзя. Есть обходные пути, но ожидайте, что через неделю или две все будет работать в любом случае и в любом браузере.

Для других современных браузеров используйте этот CSS:

position: absolute;
top: 60px;
bottom: 0px;

— Аарон Дигулла
источник

Сайт совместим только с IE 7. Когда я использую рост: 100% и верх: 60px; Я все еще пользуюсь полосой прокрутки. Я могу прокрутить 60px вниз.

— Мартейн

4

Не указывайте высоту, используйте верх и низ и дайте браузеру рассчитать высоту.

— Аарон Дигулла

Но я хочу, чтобы моя страница имела максимальную высоту 100% минус 60 пикселей; Если содержимое больше этого, я хочу использовать полосы прокрутки в div с помощью overflow: scroll;

— Мартейн

4

Для полосы прокрутки добавьте div внутри оболочки, который заполняет ее полностью, и сделайте это переполнение: scroll;

— Аарон Дигулла

Обратите внимание, что из-за ошибок в IE7, это все равно может не сработать. Если вы не можете заставить его работать, используйте JavaScript. Я знаю, тебе это не нравится, но сравни это с неделей работы, в которой борются со странными ошибками.

— Аарон Дигулла

6

отличный ... теперь я перестал использовать% he he he ... за исключением основного контейнера, как показано ниже:

<div id="divContainer">
    <div id="divHeader">
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
        </div>
        <div id="divContentRight">
        </div>
    </div>
    <div id="divFooter">
    </div>
</div>

а вот и ксс:

#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

Я проверил это во всех известных браузерах и работает нормально. Есть ли недостатки при использовании этого способа?

— Jayaveer
источник

4

Вы можете сделать что-то вроде высоты: calc (100% - nPx); например высота: calc (100% - 70px);

— DRB
источник

2

div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

Убедитесь, что при использовании меньше

height: ~calc(100% - 60px);

Иначе меньше не собирается правильно скомпилировать

— Дадхич Сурав
источник

0

Это не совсем отвечает на поставленный вопрос, но создает тот же визуальный эффект, которого вы пытаетесь достичь.

<style>

body {
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
}

#header {
  position:absolute;
  top:0;
  height:60px;
  width:100%;
}

#wrapper {
  height:100%;
  width:100%;
}
</style>

— Ноэль Уолтерс
источник

0

В этом примере вы можете определить различные области:

<html>
<style>
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
    background-color:blue;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    bottom: 0px;
    background-color:red;
}
#divContentCenter {
    position: absolute;
    top: 0px;
    left: 200px;
    bottom: 0px;
    right:200px;
    background-color:yellow;
}
#divContentRight {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width:200px;
    background-color:red;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:blue;
}
</style>
<body >

<div id="divContainer">
    <div id="divHeader"> top
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">left
        </div>
        <div id="divContentCenter">center
        </div>
        <div id="divContentRight">right
        </div>
    </div>
    <div id="divFooter">bottom
    </div>
</div>

</body>
</html>

— Ренцо Сиот
источник

0

Я еще не видел ничего подобного, но я думал, что выложу это там.

<div class="main">
<header>Header</header>
<div class="content">Content</div>

Тогда CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.main {
    height: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

header {
    height: 50px;
    margin-top: -50px;
    width: 100%;
    background-color: #5078a5;
}

.content {
    height: 100%;
    background-color: #999999;
}

Вот рабочий jsfiddle

Примечание: я понятия не имею, какова совместимость браузера для этого. Я просто играл с альтернативными решениями, и это, казалось, работало хорошо.

— FreedomMan
источник

-1

Используйте div внешнего упаковщика, установленный на 100%, и тогда ваш div внутреннего упаковщика на 100% теперь должен быть относительно этого.

Я думал наверняка, что раньше это работало на меня, но, видимо, нет:

<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper"  style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
  <div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text 

on the left</div>
  <div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the 

right</div>
</div>
</div>
</body>
</html>

— Кейд Ру
источник

Можно привести пример этого. Я не понимаю

— Мартейн

Я опубликовал то, о чем думал, но не могу заставить его работать так рано / поздно. Может быть, если я немного посплю.

— Кейд Ру

-1

Если вы не хотите использовать абсолютное позиционирование и весь этот джаз, вот решение, которое мне нравится использовать:

Ваш HTML:

<body>    
   <div id="header"></div>
   <div id="wrapper"></div>
</body>

ваш css:

body {
     height:100%;
     padding-top:60px;
}
#header {
     margin-top:60px;
     height:60px;
}
#wrapper {
     height:100%;
}

— scotsqueakscoot
источник

1

Я не думаю, что это работает, как ожидалось. Сначала #headerдолжно быть margin-top:-60px;. Во-вторых, height:100%означает, что высота будет равна 100% высоты родительских элементов, не включая поля, отступы и границы. В зависимости от настроек прокрутки это может привести к появлению полос прокрутки или обрезке вашего контента.

— Килос