CSS/HTML - ブラウザのサイズ変更で1列のレイアウトでオーバーフローが発生する

単一の列レイアウトを使用しようとしています。このページには、ヘッダー領域、コンテンツ領域、フッター領域の3つのセクションがあります。各セクションには、ユーザーの画面上の表示可能な領域の幅全体にまたがる異なる背景イメージがあります。私は次のコードに示すように、セクションをdivに分割して、内容が増えるにつれてコンテンツの領域が大きくなるようにしました。CSS/HTML - ブラウザのサイズ変更で1列のレイアウトでオーバーフローが発生する

私の問題は、ブラウザ（Chrome）でctrl +を押してテキストのサイズを大きくすると、カルーセル部分が背景領域をオーバーフローするということです。以下は、リサイズ前とリサイズ後のスクリーンショットです。

HTML/CSSコードのモックアップは簡単ですが、なぜオーバーフローが発生するのかわかりません。何か案は？私はCSS/XHTMLの新人です - 私が達成しようとしているものを達成するための他の標準的な方法はありますか？ここで

Before resizing

After resizing

<html> 
<head> 
<title>Insert title here</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 

<div id="header_container"> 
    <div id="header"> 
     Header text 
    </div> 
</div> 

<div id="content_container"> 
    <div id="content"> 
     The content 

     <div id="carousel"> 
     The carousel 
     </div> 

     <div id="clear_div"> 
     </div> 
    </div> 
</div> 

<div id="footer_container"> 
    <div id="footer"> 
     The footer 
    </div> 
</div> 

</body> 
</html>

HTMLのためのCSSです：

#header_container { 
    width: 100%; 
    background-color: green; 
} 

#header { 
    width: 960px; 
    margin: auto; 
} 

#content_container { 
    width: 100%; 
    background-color: lightblue; 
} 

#content { 
    width: 960px; 
    margin: auto; 
    position: relative; 
} 

#carousel { 
    float: right; 
    width: 300px; 
    height: 200px; 
    background-color: red; 
} 

#clear_div { 
    clear: both; 
} 

#footer_container { 
    width: 100%; 
    background-color: lightgray; 
    clear: both; 
} 

#footer { 
    width: 960px; 
    margin: auto; 
}

出典

2011-10-26 ARV

問題はそれである "幅：100％;" #content_container（青い背景）は、実際のコンテンツの幅ではなくブラウザのウィンドウの幅から計算されます。したがって、ウィンドウの幅は#contentの幅（960pxに固定）より小さくなり、#contentが背景から出てきます。

例：

あなたのブラウザウィンドウの幅が500pxなどです。
#content_container、#header_containerと#footer_container "幅：100％" も500pxなどになります。
#content幅= 960px、440px以上#content_container幅以上。
右側に#contentがあります。#content_containerは440pxです。

次に、ブラウザと同じことでサイズを増やすには、（#content幅が#content_container幅以上になる）が起こります。

たとえば、プロパティ「min-width：960px;」を追加することで修正できます。〜#content_container、#header_containerおよび#footer_containerです。したがって、常に同じ幅またはそれ以上になります。

EDIT：実際の例をmin-width：http://jsfiddle.net/Xqtuh/

出典

2011-10-26 18:14:59

うん、それでした。ありがとうございました！ – ARV

CSS/HTML - ブラウザのサイズ変更で1列のレイアウトでオーバーフローが発生する

答えて

関連する問題