0

先週から約2年ぶりにまたウェブサイトを作ろうとしています。ブラウザを最小化すると、コンテンツがラッパーに留まらないことに気付くまで、かなりうまくいきました。私はこのウェブサイトとグーグルで解決策を探していましたが、正しいものを見つけることができないようです。ほとんどの解決策は#floatとoverflowの問題に言及していますが、私はfloatを使用せず（これが問題ではないことを願っています）、オーバーフローで遊んでいますが、動作させることができません。

以下に、私が使用したCSSおよびHTMLコードを示します。

HTML：

 <div id="wrapper">

        <div id="content">

            <div id="header">

                <div id="logo">
                <img src="style/images/logo.gif" width="184" height="73" alt="logo" />
                </div>

                <div id="menu">
        <ul id="navlist">
                      <li id="active"><a href="#" id="current">1</a></li>
                      <li>2</li>
                      <li>3</li>
                      <li>4</li>
                      <li>5</li>
                    </ul>
                </div>

            </div>

            <div id="main">

                Title

                subtitle

            </div>

            <div id="footer">

                <div id="left_banner">



                </div>

                <div id="right_banner">



                </div>

            </div>

        </div>

    </div>

とCSS

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

#wrapper {
    text-align: center;
background:url(images/bg.gif);
    background-repeat:repeat;
    height:100%;
    width: 100%;
    overflow:auto;
} 

#content {
    background-color: #fff;
    margin: 0px auto;
    width: 780px; 
    height: 100%;
    border-left:#fd5d78 4px solid;
    border-right:#fd5d78 4px solid;
}

#header {
    position:relative;
    height:120px;
}

#logo {
    position:absolute;
    right:43px;
    top:37px;
}

#menu {
    position:absolute;
    bottom:0px;
    left:58px;
}



#main {
    position:relative;
    left:25px;
    top:35px;
    width:730px;
    height:320px;
}

#footer {
    position:relative;
    width:730px;
    left:25px;
    top:70px;
    background-color:#0F0;
    clear:both;
}

#left_banner {
    position:absolute;
    left:0px;
    width:349px;
    height:134px;
    border:#fd5d78 2px solid;
    background-color:#FFF;
}

#right_banner {
    position:absolute;
    right:0px;
    width:349px;
    height:134px;
    border:#fd5d78 2px solid;
    background-color:#FFF;
}

あなたの助けをミルに感謝します。

4

2 に答える 2

1

display:block;#wrapper に追加してみてください

于 2012-04-26T11:27:53.037 に答える
0

jsfiddle

フロートを使用しないと言ったことは知っていますが、フロートを使用したソリューションを次に示します。最大の問題の 1 つは、2 つのフッター バナーを絶対位置に設定していたため、親 div の 100% の高さがずれていたことです。float と overflow:hidden を使用すると、これらの div を 100% 計算に戻すことができます。

CSS に多くの変更を加える必要があったため、jsfiddle にあるものを出発点として使用してください。

于 2012-04-26T14:06:07.963 に答える