html - div がコンテナの外側に流れています - 可能ですか?

Question

だから私はスケルトンと呼ばれるレスポンシブフレームワークを使用していますが、これはうまく機能しますが、ヘッダーやフッターなどのセクションでは、現在人気のあるデザインの選択肢であるページの幅 100% に背景を広げたいと考えています.

コンテナーの外側に div ポップを作成するためだけに、これに対する回避策はありますか?

Answer 1

コンテナーにデフォルトの位置プロパティ (静的) があると仮定すると、ヘッダーにposition:absolute. 次にtop:0、left:0と を設定しright:0ます。

コンテナーの上マージンまたはパディングを、ヘッダーに定義されているのと同じ高さに設定してください。

コンテナーに相対、絶対、または固定の位置の値が与えられている場合、これは機能しません。

Answer 2

Try this:
body {
font-family: 'Open Sans',sans-serif;
font-size: 0.875em;
overflow-x: hidden;
}
.header-container {
background-color: #CCCCCC;
float: left;
height: 100px;
margin-left: -400px;
overflow: hidden;
padding-right: 800px;
width: 100%;
}
#header {
margin-left: 409px;
margin-top: 10px;
text-align: center;
}

Answer 3

skeleton.css 301 行目:

.container:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}

この宣言により、コンテナーの後に表示されるコンテンツが表示されないようにするため、ページ上のグリッドが中断されることはありません。

コンテナーも幅 960px に設定されてposition:relativeいます (skeleton.css 行 24)。これは、javascript を使用せずにページ幅に設定できるコンテナー div 内に何も作成できないことを意味します (簡単にするために + jquery )。ほとんどのサイトのこのような重要な設計機能について、これに頼るのはあまり良い考えではありません。

.container の :after 宣言を削除してから、<div>その下に新しいものを追加しwidth:100%; height:128px;て、開始点としてグリッドにどのように影響するかを確認します。