div ベースのレイアウトを使用して 2 列のページを作成しようとしています (テーブルは使用しないでください!)。問題は、左の div を右の div の高さに合わせて拡大できないことです。通常、右側の div には多くのコンテンツがあります。
問題を説明するために、私のテンプレートを組み合わせた例を次に示します。
<div style="float:left; width: 150px; border: 1px solid;">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div style="float:left; width: 250px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....
</div>
あなたの最も簡単な答えは、現在どのブラウザーもサポートしていない css (3) の次のバージョンにあります。
今のところ、javascript で高さを計算し、左側に設定することに追いやられています。
ナビゲーションをそのように配置することが非常に重要な場合は、上部に沿って実行します。
また、境界線をコンテナーとより大きな内側に移動して、同じサイズに見えるようにすることで、視覚的なトリックを行うこともできます。
これにより、同じように見えますが、そうではありません。
<div style="border-left:solid 1px black;border-bottom:solid 1px black;">
<div style="float:left; width: 150px; border-top: 1px solid;">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
...
</div>
<div style="clear:both;" ></div>
</div>
CSSでできる！他の人に言わせないでください。
それを行うための最も簡単で最も痛みのない方法は、フェイクカラム法を使用することです.
ただし、その解決策がうまくいかない場合は、このテクニックを読んでください。ただし、注意してください。これは、真夜中に冷や汗で目が覚めるような CSS ハッカーです。
その要点は、列の下部に大量のパディングを割り当て、同じサイズの負のマージンを割り当てることです。次に、設定されたコンテナに列を配置しますoverflow: hidden。多かれ少なかれ、パディング/マージンの値により、ボックスはラッパーの最後 (コンテンツが最も多い列によって決定される) に到達するまで拡大し続けることができ、パディングによって生成された余分なスペースはオーバーフローとして切り取られます。それはあまり意味がありません、私は知っています...
<div id="wrapper">
<div id="col1">Content</div>
<div id="col2">Longer Content</div>
</div>
#wrapper {
overflow: hidden;
}
#col1, #col2 {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
リンク先の記事全体を必ずお読みください。多くの警告やその他の実装上の問題があります。きれいなテクニックではありませんが、かなりうまく機能します。
この問題には jQuery を使用してください。準備ができている関数でこの関数を呼び出すだけです:
function setHeight(){
var height = $(document).height(); //optionally, subtract some from the height
$("#leftDiv").css("height", height + "px");
}
これは、CSS ではできない完全に合理的で単純なことの 1 つです。Silviu によって提案された Faux Columns は、ハックですが機能的な回避策です。いつか言い方があったら素敵だな
div.foo {
高さ: $(div.blah.height);
}
これは、背景色を使用する css で実行できます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #87ceeb;
font-size: 1.2em;
}
#container {
width:100%; /* any width including 100% will work */
color: inherit;
margin:0 auto; /* remove if 100% width */
background:#FFF;
}
#header {
width: 100%;
height: 160px;
background: #1e90ff;
}
#content {/* use for left sidebar, menu etc. */
background: #99C;
color: #000;
float: right;/* float left for right sidebar */
margin: 0 0 0 -200px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
background: #FFF;
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}
#sidebar {
background: #99C;
color: inherit;
float: left;
width: 180px;
padding: 10px;
}
.clearer {
height: 1px;
font-size: -1px;
clear: both;
}
/* content styles */
#header h1 {
padding: 0 0 0 5px;
}
#menu p {
font-size: 1em;
font-weight: bold;
padding: 5px 0 5px 5px;
}
#footer {
clear: both;
border-top: 1px solid #1e90ff;
border-bottom: 10px solid #1e90ff;
text-align: center;
font-size: 50%;
font-weight: bold;
}
#footer p {
padding: 10px 0;
}
</style>
</head>
<body>
<div id="container">
<!--header and menu content goes here -->
<div id="header">
<h1>Header Goes Here</h1>
</div>
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc
vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>
<div id="sidebar">
<!--sidebar content, menu goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
</div>
<div class="clearer"></div><!--clears footer from content-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html>
そういえば、列の下枠でやったことがない。溢れて途切れてしまったのだろう。列のコンテンツの一部である別の要素から下の境界線を取得したい場合があります。
とにかく、これが完璧な特効薬ではないことはわかっています。あなたはそれで遊ぶか、その欠点をハックする必要があるかもしれません.
これを使用して、ID「中央」と「右」の 2 つの列を揃えます。
var c = $("#center");
var cp = parseInt(c.css("padding-top"), 10) + parseInt(c.css("padding-bottom"), 10) + parseInt(c.css("borderTopWidth"), 10) + parseInt(c.css("borderBottomWidth"), 10);
var r = $("#right");
var rp = parseInt(r.css("padding-top"), 10) + parseInt(r.css("padding-bottom"), 10) + parseInt(r.css("borderTopWidth"), 10) + parseInt(r.css("borderBottomWidth"), 10);
if (c.outerHeight() < r.outerHeight()) {
c.height(r.height () + rp - cp);
} else {
r.height(c.height () + cp - rp);
}
それが役に立てば幸い。
右側のコンテンツ div と同じ高さで左側のメニュー divを拡大するには。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var height = $(document).height(); //optionally, subtract some from the height
$("#menu").css("height", (height) + "px");
$("#content").css("height", (height) + "px");
});
</script>
<style type="text/css">
<!--
html, body {
font-family: Arial;
font-size: 12px;
}
#header {
background-color: #F9C;
height: 200px;
width: 100%;
float: left;
position: relative;
}
#menu {
background-color: #6CF;
float: left;
min-height: 100%;
height: auto;
width: 10%;
position: relative;
}
#content {
background-color: #6f6;
float: right;
height: auto;
width: 90%;
position: relative;
}
#footer {
background-color: #996;
float: left;
height: 100px;
width: 100%;
position: relative;
}
-->
</style>
</head>
<body>
<div id="header">
i am a header
</div>
<div id="menu">
i am a menu
</div>
<div id="content">
I am an example of how to do layout with css rules and divs.
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
</div>
<div id="footer">
footer
</div>
</body>
</html>
@hoyhoy
デザイナーがこれを html で動作させることができる場合、彼はこのデザインを持つことができます。彼がウェブデザインの真の達人なら、これがメディアの限界であることを理解するでしょう。雑誌広告ではビデオは不可能だからです。
2 つの列に同じ重要性を与えることで重みをシミュレートしたい場合は、境界線を変更して同じ重みに見えるようにし、境界線の色を列のフォントの色と対照的にします。
ただし、物理要素を同じ高さにすることに関しては、現時点では、テーブル構成または高さの設定を使用してのみ行うことができます。同じサイズに見えるようにシミュレートするには、同じサイズである必要はありません。
Javascript ベースのソリューションもあります。jQuery をお持ちの場合は、以下のプラグインを使用できます。
<script type="text/javascript">
// plugin
jQuery.fn.equalHeights=function() {
var maxHeight=0;
this.each(function(){
if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
});
this.each(function(){
$(this).height(maxHeight + "px");
if (this.offsetHeight>maxHeight) {
$(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
}
});
};
// usage
$(function() {
$('.column1, .column2, .column3').equalHeights();
});
</script>