CSS - divで塗りつぶしページ（horzonal）

私は、メインのコンテンツフレームがページの幅全体に渡って、最低限の高さで必要な高さになるようにウェブサイトを構築しています"サイドバー"という）。ただし、div要素の幅を100％に設定してもウィンドウがいっぱいにならない場合は、上書きして横スクロールバーを作成します。コンテンツのdivをページの全幅に伸ばす方法はありますか？ボックスサイジングやオーバーフロー設定のように、サイドまたはボトムからクリッピングしないでください。CSS - divで塗りつぶしページ（horzonal）

が
base.css

html, body { 
    margin:0; 
    padding:0; 

    font-family: "Lucida Grande", Verdana; 
    font-size: 0.9em; 

    background-color:#4D714D; 
    background-image:url("images/titlebar.png"); 
    background-attachment:fixed; 
    background-repeat:no-repeat; 
    background-position:0px 7px; 
} 

div.content 
{ 
    position:relative; 
    top: 150px; 

    padding: 20px; 

    margin-left: auto; 
    margin-right: auto; 

    width:100%; 
    min-height:500px; 

    background-color:#8BB88B; 
} 

div.sidebar 
{ 
    float:right; 

    position:relative; 
    top:-20px; 
    left:20px; 

    width: 400px; 
    height: 400px; 

    background-color:#FFFFFF; 
}

、お時間ティモシーS.ありがとうござい例のページ

<html> 
    <head> 
     <title>Login</title> 
     <link type="text/css" href="base.css" rel="stylesheet" />  
    </head> 

    <body> 
     <div class="content"> 
      <div class="sidebar"></div> 
      <form action="loginScript.php" method="post"> 
       <label>Username:</label> 
       <input type="text" name="username" /> <br /> 
       <label>Password:</label> 
       <input type="password" name="password" /> <br /> 
       <input type="submit" value="Login" name="login" /> 
      </form> 
      <?php print($_GET['msg']) ?> 
     </div> 
    </body> 
</html>

出典

2011-12-04 Timothy S.

説明したレイアウトは、divなどのブロック要素のデフォルト動作です。そのように表示されていないことは、デフォルトを上書きしたことを示します。実際、原因はwidth: 100%です。あなたはそれをCSSから安全に削除できます。

あなたの質問は、私がCSSに最小限のアプローチを取る理由の完全な例です。あなたはそれが必要であると確信しているときにのみスタイルを適用します。そうすれば、あなたのページが期待通りに表示されない場合、デバッグすることは少なくなります。

出典

2011-12-04 07:05:16 gilly3

ああ、ありがとう、今トリミングの良いビットを行った。 –

は、要素の幅は、ボーダー、マージンが含まれていません、パディング。実際には幅を100％+他のすべて（20px右と20pxはパディングなどのために残しています）です。あなたの部門は既にブロックレベルであり、そのステータスを削除しているようには見えないので、ブロックレベルの要素として幅を完全に削除する必要があります。パディングやその他のものは含まない）。

また、部門がページの幅全体に拡大する場合は、左右の余白をautoに設定する必要はありません。

出典

2011-12-04 06:31:19 animuson

ありがとうございます。私はボックスモデルの残りの部分を考慮していなかった.... 2番目のビットと同様に良いスポット;私は最初に中心のレイアウトを試して、それに対して決定しましたが、そのビットを削除するのを忘れていたようです。ありがとう。 –

余分な間隔は、埋め込みから来るdiv.contentです。比較的div.sidebar位置から、また

padding: 20px 0;

：に変更します。取り除くleft:20px;

出典

2011-12-04 06:38:18 bookcasey

あなたの答えをありがとう、私は100％がコンテンツにのみ参照して、ボックスモデルの残りの部分を認識していませんでした。 –

CSS - divで塗りつぶしページ（horzonal）

答えて

関連する問題