0

これは私が現在使用しているコードです：http：//jsfiddle.net/HMsKa/39/

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
    <title>Title</title>
    <link href="main2.css" rel="stylesheet" type="text/css">
    <!--[if !IE 7]>
    <style type="text/css">
    #wrap {display:table;height:100%}
    </style>
    <![endif]-->
</head>
<body>

<div id="wrap">
    <div id="header">
        <a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
        <ul>
            <li><a href="/posts/list/">Link1</a></li>
            <li><a href="/posts/create/">Link 2</a></li>
            <li><a href="/about">Link 3</a></li>
        </ul>
    </div>

    <div id="main">
        There are many sticky footer methods to be found in Google. I've tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don't in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.
    </div>

</div>

<div id="footer">
    &#169; 2012 Company, Inc.
    <ul>
    <li><a href="/contact">Contact</a></li>
    <li><a href="/faq">FAQ</a></li>
    <li><a href="/terms">Terms</a></li>
    <li><a href="/privacy">Privacy</a></li>
    </ul>
</div>

</body>
</html>​

CSS

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#wrap {
    min-height: 100%;
}

#main {
    padding-bottom: 60px; /* must be same height as the footer */
    overflow:auto;
    background-color: purple;
}

#footer {
    height: 60px;
    margin-top: -60px; /* negative value of footer height */
    position: relative;
    clear:both;
    background-color: blue;
} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}

#header {
    background-color: orange;
    height: 60px;
}

ヘッダーとフッターの背景がページ全体に広がっているが、ヘッダーコンテンツ、フッターコンテンツ、メインコンテンツが中央の固定幅の列にある、stackoverflowでこのような設定をしようとしています。ページ。JSFiddleで少し遊んだ後、私はあまり運がなかったので、これを行うには正しい方法と間違った方法があると確信しています。

誰かがこれを達成するための最良の方法を教えてもらえますか？

4

5 に答える 5

1

これにより、中央の列が画面幅の80％になります。

#main {
   width: 80%;
   margin: 0 auto;
}

これにより、900pxで修正されます。

#main {
   width: 900px;
   margin: 0 auto;
}

編集：

#header {
    width: 100%;
}
#header_content {
    width: 900px;
    margin: 0 auto;
}
#main {
    width: 900px;
    margin: 0 auto;
}

HTML：

<div id="header">
    <div id="header_content">My header content, 900px in width</div>
</div>
<div id="main">
    My main content, also 900px in width;
</div>
于 2012-10-11T08:15:16.873 に答える
0 
#main {
    width: 900px;
    margin: 0 auto;
}
于 2012-10-11T08:12:55.620 に答える
0

cssを定義するだけです

#main {
    background-color: purple;
    margin: auto;
    overflow: auto;
    padding-bottom: 60px;
    width: 90%;
}
于 2012-10-11T08:14:03.253 に答える
0

私の過小評価に従って、私はjsfiddleを作成しました。ご覧になり、他に問題がありましたらお知らせください。

デモ

http://jsfiddle.net/saorabhkr/3Ak7S/1/

編集

変更を加えましたので、ご覧ください。

http://jsfiddle.net/saorabhkr/3Ak7S/5/

于 2012-10-11T08:23:29.587 に答える
0

ヘッダーとフッターを100％の幅に設定し、コンテンツをそれらの中央に配置してから、本文を中央に配置します。

これは、すでにposition：relativeに設定されているため、フッターにとっては簡単です。フッター内に別のdivを追加します。これは、幅900ピクセル、位置：絶対、左：50％、左マージン-450ピクセルのコンテンツを保持します。

ヘッダーと本文にも同じアプローチを使用します。

申し訳ありませんが、説明のためにコードを追加しますが、iPhoneを使用しています。数時間かかります> _ <実際のキーボードに到達したら、わかりやすくするために編集します。

于 2012-10-11T08:33:42.497 に答える