0

私はこれらのレイアウトを持っています：

<div id='wrapper'>
    <div id="contentwrap">
         <div id='content'></div>
         <div id='lhs'></div>
         <div id='rhs'></div>
    </div>
    <div id='footer'></div>
</div>

およびCSS：

#content {
    margin: 0 300px auto 180px !important;
    position: absolute;
    top: 142px;
}    

#wrapper {
    margin: 0 auto;
}
#lhs {
    float: left;
    width: 170px;
}
#rhs {
    float: right;
    width: 300px;
    margin-left: -300px;
    margin-right: 10px;
}

#footer {
    clear: both;
    width: 100%;
}

要件は1つだけです。＃contentは[contentwrap]内の最初の要素である必要があります。

その高さは動的です。

高さが高くなると問題が発生します。コンテンツが#footerとオーバーラップします。

私の現在のレイアウト '#footer'が常に'#content'の下に表示され、重複が発生しないようにするにはどうすればよいですか？

P / S：小さな画像でごめんなさい、imgurはそれをしました！

4

4 に答える 4

0

コンテンツを更新した後の自動プッシュ フッター:

<style>
#content {
    margin: 0 300px auto 180px !important;
    position: absolute;
    top: 142px;
    background-color:red;
}    

#wrapper {
    margin: 0 auto;
}

#footer{
    position:absolute;
}
</style>

<div id='wrapper'>
    <div id="contentwrap">
         <div id='content'>
             Example Text<br>
             Two Lines
         </div>
         <div id='lhs'></div>
         <div id='rhs'></div>
    </div>
    <div id="footer">The is the Footer</div>
</div>
<script>
function updateFooter(){
footer=document.getElementById('footer');
content=document.getElementById('content');
contentBottom=content.offsetTop+content.offsetHeight;
footer.style.position='absolute';
footer.style.top=contentBottom + 'px'
}
window.setInterval(updateFooter,100)
</script>
于 2013-02-12T12:22:40.123 に答える
0

わかりました。これは、3 つの列すべてを左にフロートさせて互いに隣り合わせにする手法を使用し、負の左余白を使用して左側の列をビューに引き戻します。

これを広範囲にテストしていないため (Firefox 18 / Windows7 のみ)、すべてのブラウザーと OS の組み合わせで動作するとは限りません。

#wrapper {
    margin: 0 auto;
    width: 100%;
}

#contentwrap {
    float: left;
    width: 100%;
}

#content {
    margin: 0 300px auto 170px !important;
}    

#lhs {
    float: left;
    width: 170px;
    margin-left: -100%;
}

#rhs {
    float: left;
    width: 300px;
    margin-left: -300px;
    margin-right: 0px;
}

#footer {
    clear: left;
    width: 100%;
}
于 2013-02-12T13:32:30.420 に答える
0

方法が常にある。しかし、それが正しい/安全な方法であるという意味ではありません。この例は、それが可能であることのデモンストレーションにすぎません。HTML を変更し、この手法を使用しないことをお勧めします。使用する

<div id='lhs'></div>
<div id='content'></div>
<div id='rhs'></div>

一緒にfloat: left;

この例では、css3 の calc() 関数を使用しているため、古いブラウザーでは機能しない可能性があります。これは機能していてレスポンシブですが (ページ幅に応じて幅が変わります)、html を変更する必要があります。

フィドル

于 2013-02-12T13:50:15.383 に答える
-2

max-height#content divでスタイルを使用できます

または、次のようにフッターとコンテンツの間に空の div を配置します。

<div id='wrapper'>
    <div id="contentwrap">
         <div id='content'></div>
         <div id='lhs'></div>
         <div id='rhs'></div>
    </div>
    <div style="clear:both;height:0px;overflow:hidden;"></div>
    <div id='footer'></div>
</div>
于 2013-02-12T12:14:54.180 に答える