0

ばかげた質問で申し訳ありませんが、何らかの理由でHTML/CSSレイアウトのこの部分は常に私を取得します...

私はhttp://kdmalikdesign.com/test/LinguisticPeers/index.htmlにウェブサイトを持っています。HTML / CSS / jQuery、そして最終的にはPHP/Databasesを練習するだけです。

クロムでは、フッターが長すぎます。Firefoxでは、フッターは私が望むものの約3倍であり、Safariでは同じです。現在、HTMLと本文の高さが100％になっているため、背景画像が表示されているすべてのものに拡大されます。

フッター（現在は長すぎる）を補うために、フッターがスペースを収容できるようにメインコンテナーを最小の長さにする必要がありますか？これに関する一般的な設計ルールはありますか？またはCSSルール？

基本的に何が起こっているのかは、ヘッダーとメインコンテナーの外観が好きですが、ブラウザーウィンドウ全体がいっぱいにならないため、フッターが長くなりすぎるか、html、body 100％がない場合は、フッターの下の空白。すぐに確認したい場合は、私のCSSコードを以下に示します。

唯一の高さはhtml、bodyで100％です。ヘッダーの高さは100ピクセルで、各コンテナーは160ピクセルです。フッターも55pxです。

html, body, div, header, footer, article, h2 {
    margin: 0px;
    padding: 0px;
}

html, body {
    height: 100%;
    background-image: url('images/bkg-img.jpg');
    background-repeat: repeat;
}
header {
background: #6888fd; /* Old browsers */
background: -moz-linear-gradient(top, #6888fd 0%, #1c46e9 55%, #0330e4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6888fd), color-stop(55%,#1c46e9), color-stop(100%,#0330e4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6888fd 0%,#1c46e9 55%,#0330e4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6888fd 0%,#1c46e9 55%,#0330e4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6888fd 0%,#1c46e9 55%,#0330e4 100%); /* IE10+ */
background: linear-gradient(to bottom, #6888fd 0%,#1c46e9 55%,#0330e4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6888fd', endColorstr='#0330e4',GradientType=0 ); /* IE6-9 */
height: 100px;
}

#background-container {
    padding-top: 50px;
    padding-bottom: 25px;
}

#container {
    margin: 0 auto;
    background-color: #587DFF;
    height: 230px;
    width: 830px;

    text-align: center;
    padding-top: 100px;

    -moz-border-radius: 25px;
    border-radius: 25px;
}

#article-container {
    width: 960px;
    margin: 0 auto;
}

article {
    border: 4px solid #9AADFA;
    background-color: #002DE2;
    color: #fff;
    width: 280px;
    height: 160px;

    float: left;
    margin-left: 30px;
    margin-top: 25px;
    /* 
            display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
    */
}

.clear {
    clear: both;
}

span {
    display: block;
    padding-top: 10px;
    color: #6D8EFF;
}

h2 {
    padding-left: 10px;
    padding-top: 5px;
}

p {
    padding-left: 5px;
    padding-right: 5px;
}

footer {
    text-align: center;
    border-top: 1px solid #7493FF;
    background-image: url('images/bkg-img.jpg');
    background-repeat: repeat;

    height: 55px;
}

nav {
    float: right;
    color: #84A0FF;
    position: relative;
    top: 60px;
    left: -75px;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
    padding-left: 10px;
}

#login-container {
    float: right;
    padding-right: 50px;
    padding-top: 25px;
    color: #fff;
    position: relative;
    left: 450px;
}

#header-container {
margin: 0 auto;
    width: 960px;
    height: 100px;
}
4

1 に答える 1

0

フッターをページの下部に貼り付けたい場合は、このようなものが役立つ場合があります。

于 2013-02-02T22:25:43.110 に答える