BinaryDevelop
  1. ホーム
  2. css

[解決済み】CSS divの高さを100%マイナスnPxにする方法【重複あり

2022-04-11 13:45:52

質問

私は、2つのdivを隣り合わせに配置したラッパーdivを持っています。このコンテナの上に、ヘッダーを含む div があります。wrapper div は、100% からヘッダーの高さを引いたサイズでなければなりません。ヘッダーは約 60 px です。これは固定です。そこで質問なのですが、wrapper divの高さを100%から60pxを引いた値にするにはどうしたらいいのでしょうか？ 

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

解決方法は？

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で承認されていませんが、すべての主要なブラウザでサポートされています。2つのdiv #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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します