CSS divの高さを100％マイナスnPxに設定する方法

199

2つのdivを隣り合わせに含むラッパー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がwidthに値から定数プロパティを追加することを検討することを本当に望みます、彼らは幅に境界線を含めることを忘れていましたが、これらの2つが利用可能である場合、CSSハックのほとんどが消える定義を変更する必要がありました。
— samarjit samanta 2011

回答:

79

以下は、Firefox / IE7 / Safari / Chrome / Operaでテストされた動作する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}

「overflow-y」はw3cで承認されていませんが、すべての主要ブラウザがサポートしています。#leftと#rightの2つのdivは、コンテンツが高すぎる場合に垂直スクロールバーを表示します。

これを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>
スニペットを展開

— アルシエンデ
ソース
FFで動作しますが、IE7では動作しません。「ヘッダー」コードのみが表示されます：<div id = "header"> Header </ div> <div id = "wrapper"> <div id = "left"> Left </ div> <div id = "right">右</ div> </ div>
— Martijn
標準準拠モードをトリガーしましたか？応答にサンプルページを追加します。
— アルシエンデ2009
1
また、これらのdivをページの中央またはその他の場所に配置する必要がある場合は、コンテナーdivにラップしてコンテナーに設定position: relativeします。次に、コンテナをページの好きな場所に配置します。
— Mrchief、2007
たとえば、それぞれの高さが40％と60％の2つのdivが必要な場合、＃leftの内側の内側のdivはどうですか？
— TecHunter 2013年
pxが0値パラメーターで指定された理由に関して特定の理由はありますか？
— Cassandra、2016
274

CSS3では、 

height: calc(100% - 60px);
— libjup
ソース
25
「-」記号の前後にスペースがあることを確認してください。Firefoxでは、「-」記号の前にスペースが必要です。
— Codler 2013
7
完璧。CSS3がこれを実行できることを知りませんでした。
— トム・ブナ
うわー！まさに私が欲しかったもの。ありがとう。
— Sandhu
1
これは素晴らしいです
— ミルコ
47

IE6をサポートする必要がある場合は、JavaScriptを使用してラッパーdivのサイズを管理します（ウィンドウサイズを読み取った後、要素の位置をピクセル単位で設定します）。JavaScriptを使用したくない場合、これは実行できません。回避策はありますが、すべての場合とすべてのブラウザーで機能するようになるまでに1〜2週間かかると予想されます。

他の最新のブラウザでは、次のcssを使用します。

position: absolute;
top: 60px;
bottom: 0px;
— アーロン・ディグラ
ソース
このサイトはIE 7とのみ互換性があります。高さを使用する場合：100％、上部：60px; 私はまだスクロールバーを探しています。60px下にスクロールできます。
— Martijn、
4
高さを指定せず、上下を使用して、ブラウザに高さを計算させます。
— アーロンディグラ2009
しかし、ページの最大の高さを100％から60pxを引いたものにしたいと思います。コンテンツがそれよりも大きい場合は、overflow：scroll;を使用して、divにスクロールバーが必要です。
— Martijn
4
スクロールバーの場合は、ラッパー内にdivを追加して完全に埋め、オーバーフローさせます。
— アーロンディグラ2009
IE7のバグのため、これでも失敗する可能性があることに注意してください。動作しない場合は、JavaScriptを使用してください。私は知っています、あなたはそれが好きではありませんが、奇妙なバグに苦しんでいる1週間の作業に対してそれを重み付けします。
— アーロンディグラ2009
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>

そしてここにCSSがあります：

#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;
}

私はこれをすべての既知のブラウザーでテストし、正常に動作しています。この方法を使用して欠点はありますか？

— ジャヤヴィーア
ソース
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です

注：これに対するブラウザーの互換性は何なのかわかりません。私は代替ソリューションをいじっていただけで、これはうまく機能しているようでした。

— フリーダムマン
ソース
-1

100％に設定された外側のラッパーdivを使用すると、内側のラッパー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>
— ケイドルー
ソース
その例を示すことができます。わかりません
— Martijn
考えていたものを投稿しましたが、この初期/後期に機能させることができません。多分もう少し睡眠をとれば。
— Cade Roux、
-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;。2番目はheight:100%、高さが親要素の高さの100％になることを意味します。マージン、パディング、ボーダーは含まれません。スクロール設定に応じて、スクロールバーが表示されるか、コンテンツがトリミングされます。
— カイロス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.