4

皆さん、これは私の最初の投稿です。

同じ幅にする必要がある子 div があるという問題に直面しています。は#contentブラウザ ウィンドウよりも大きくなる可能性があります (したがって、3000pxは常にブラウザ ウィンドウよりも大きくなるとは限りません)。現在#content、 は適切に表示されており、スクロールバーを使用して全体を表示できます#contentが#messages、#menuブラウザ ウィンドウの幅で切り取られています。

および他のいくつかのオプションを使用してみwidth: inheritましたが、機能しませんでした。他の誰かが実用的な解決策を持っていますか?

生活を楽にするために JSFiddle を作成しましたhttp://jsfiddle.net/Ks665/

問題のスクリーンショットを追加しました:

ここに画像の説明を入力

赤と緑は、青の div と同じ長さにする必要があります。

HTML:

<html>
<head>
    <link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
    <div id="messages">test</div>
    <div id="menu">test</div>
    <div id="content">test</div>    
</body>
<html>

CSS:

@import url('reset.css');

body {
    min-width: 990px;
}

#messages {
    height: 100px;
    background-color: red;
}

#menu {
    height: 100px;
    background-color: green;
}

#content {
    background-color: blue;
    height: 250px;
    width: 3000px;
}
4

1 に答える 1

1

それらを別の DIV 内にラップしてみて、そこで幅を指定することができます。子 DIV は、親の幅に合わせて自動的に塗りつぶされます。

<div id="container">
    <div id="messages">test</div>
    <div id="menu">test</div>
    <div id="content">test</div>
</div>

そして、幅を「コンテンツ」ではなくコンテナ DIV に適用します。

#container {
    width: 3000px;
}

あなたの例で機能しない理由は、DIV が body タグの子であり、最小幅が指定されているためですが、上記のように明示的に定義されていないためです。

于 2013-08-12T10:47:15.177 に答える