1

単一ページの Web サイトを作成しようとしていますが、基本的なレイアウトを並べ替えるのに問題があります。私が欲しいのは、ユーザーがサイトにアクセスしたときに、最初の div が伸びてブラウザー ウィンドウを埋めることです ( http://whiteboard.isなど)。その後、2 番目の div の位置は固定されますが、手動で高さを設定できるので、大量のコンテンツを追加できます。

背景サイズのタグを使用してみましたが、何らかの理由で横方向にしか伸びません。垂直方向には、min-height: 値に設定されます。

理由はありますか？

HTML

<body>

<section id="first" class="clearfix">
<div class="scanlines"></div>
</section>

<section id="second" class="clearfix">
<div class="scanlines"></div>
</section>

</body>

CSS

#first {
    background: url(1.jpg) no-repeat center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-width: 1024px;
    min-height: 768px;
    }

#second {
    background: url(3.jpg) center no-repeat fixed;
    position: relative;
    height: 8000px;
    width: 100%;
    }

.scanlines { 
    background: url(scanlines.png); 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 25;
    }
4

3 に答える 3

1

クラスのposition: absoluteonは.scanlinesブロックをフローから外し、コンテナのサイズを大きくしないようにします。

于 2012-05-12T21:27:58.180 に答える
0

.scanlines に padding-left と padding-right を追加してみてください。必ず box-sizing: border-box を .scanlines に設定してください。

これにより、コンテンツも垂直になります。width:100% があるため、コンテンツは水平に流れようとします。

于 2013-02-27T22:33:23.857 に答える