0

私がやろうとしているのは、ヘッダーとナビゲーション バーの下の Web サイト全体の背景にわずかなグラデーションを追加することです。これを本文に追加し、コンテナに背景を持たないようにしたいと考えています。コンテナをグラデーションにすると、それがコンテナに適用され、ボディは下にどんな色でも空白のままになります。

本文をグラデーションにし、コンテナーの背景をなしに設定すると、コンテナーの背景に奇妙な暗いグラデーションが表示され、ページの下半分 (本体の半分) に正しいグラデーションが表示されます。これを行うコードは次のとおりです。

私のHTML：

<body>

<div id="header">

    <h1>stuff</h1>
    <p>more stuff</p>

</div>

<div id="navbar"></div>

<div id="container">

    <div id="main_text">
        main text of site
</div>
</div>
</body>

そして、ここに私のCSSがあります:

#container {
margin: 0 auto;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;

background: none;
}
#navbar {
padding: 0px;
height: 30px;
width: auto;
background-position: bottom;
background-color: #000;
}
#main_text {
margin: auto;
margin-top: 20px;
overflow: hidden;
width: 1000px;
border: 1px outset #000;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #FFF;
}

#header {
height: 100px;
margin: 0 auto;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
background-color: #FFF;
background: linear-gradient(to bottom, #86b9e0 0%,#2989d8 50%,#0e75c9 100%);       
}
body {
padding: 0px;
margin: 0px;
background: linear-gradient(to bottom, #e5e5e5 0%,#afafaf 53%,#a0a0a0 100%);
}

本当に単純なものが欠けているだけなのか、それともまったく別の方法でページを設計する必要があるのか​​ はわかりません. どんな援助でも大歓迎です。ありがとう！

4

1 に答える 1

2

これをcssに追加してみてください：

html, body {
min-height: 100%;
height: auto;    
}

これにより、ボディが少なくともビューポートの高さを占めるようになります。

ここで例を確認してください: http://jsfiddle.net/ZzArv/

于 2013-04-04T17:33:23.643 に答える