3

ページを埋める 2 つの列を作成しています。とてもシンプルです。ただし、非常にわずかな垂直スクロールバーが表示されます。設定margin: 0してpadding: 0オンにするhtmlと、body修正されませんでした。

調べたoverflow: hiddenけど好きじゃない。一番下にdivを配置することも検討しましたclear:bothが、何もしませんでした。の使用を検討しましたがmin-height、正しく動作しないようです。

2 つの質問があります。

  1. 垂直スクロールバーが表示されるのはなぜですか?
  2. 垂直スクロールバーを削除するにはどうすればよいですか?

実際の例: http://jsfiddle.net/XrYYA/

HTML:

<body>
    <div id="palette">Palette</div>
    <div id="canvas">Content</div>
</body>

CSS:

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

#palette {
float: left;
width: 300px;
height: 100%;
border: 1px solid black;
}

#canvas {
margin-left: 300px;
height: 100%;
border: 1px solid blue;
}
4

1 に答える 1

5

これは、要素の両側に 1 ピクセルの境界線があるためです。

100% + 2px ボーダー != 100%.

box-sizing要素の高さに境界線を含めるために使用できます。

jsFiddle の例

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

calc()または、 を使用して 2px を減算することもできます。

height: calc(100% - 2px);

jsFiddle の例

于 2013-11-09T20:58:58.917 に答える