8

right div float一言で言えば、私は垂直方向に拡張したいのですが、それは私が私のhtml100% に含めない場合にのみ機能します<doctype>

今日の標準では、本当に追加する必要があり<doctype>ますか？

これは、InternetExplorerでの結果です。

Doctypeの問題

これは簡単ですhtml

<html>
<head>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#left {
background:yellow;
float:left;
width:70%;
min-height:100%;
}
#right {
background:pink;
float:right;
width:30%;
min-height:100%;
}
</style>

<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
4

3 に答える 3

7

今日の標準では、本当に追加する必要があり<doctype>ますか？

何もする必要はありませんが、DOCTYPEがないということは、本質的に、（用語の最も緩い意味で）未知の/一貫性のない「癖」標準に準拠していることを意味します。

解決策は、親コンテナの高さを100％または特定のピクセルの高さに設定するのと同じくらい簡単だと思います。

  • HTMLおよびBODY要素に高さが設定されていることを確認してください。
  • 親コンテナに高さが設定されていることを確認してください。

実例： http： //jsfiddle.net/7xxFj/

<div id="one">
    First column
</div>
<div id="two">
    second column
</div>​

HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }

@BoltClockがコメントで指摘しているように、100％を超えて拡張できるレイアウトが必要になる可能性があります。これにはもう少し手間がかかります（ただし、標準内では十分に機能します）。

この記事では、列の高さが等しいレイアウトを実現するためのいくつかの方法を示します。ここに他のメソッドがあります。

于 2012-12-13T05:28:57.563 に答える
2

IE（そのことについてはどのバージョンでも、このトピックに逸脱しないでください）を検討することを考えている場合は、DOCTYPEを指定することをお勧めします。IEを介して有名なQuirksモードでこれを適切に行わないページをたくさん見ました。

于 2012-12-13T05:36:41.337 に答える
1

このコードを使用する

<!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">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
于 2012-12-13T05:47:27.740 に答える