0

CSS に問題があります。基本的に<div>、サイトのすべてのコンテンツを保持する呼び出されたコンテナーがあります。コンテナーは、他のものの右側の余白と平行に実行されます。

下部で正しく整列するには、2 つが必要です。Chrome と Safari ではコンテナの高さが同じで、右側の余白とコンテナの両方が揃っていますが、Firefox ではコンテナが右側の余白よりも短くなっています。ばかげているように見えるので、Firefoxまたは別の方法で個別のcss条件を設定できますか。

高さ 100% を使用しようとしましたが、javascript やその他の非表示やフェードインなどの理由があるため、これを使用できません。

#container {
        /* [disabled]overflow: hidden;
    */
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        /* [disabled]float: left; */
        width: 960px;
        margin-left: auto;
        margin-right: auto;

    }

    body {
        /* [disabled]margin-right: auto; */
        /* [disabled]margin-left: auto; */
        /* [disabled]width: 1010px; */
        font-size: 11px;
        font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
        color:#3F3F3F;
        background-color: #F3F3F3;
        margin-top: 20px;
        overflow:auto;
        /* [disabled]float: left; */
    }
4

2 に答える 2

0

HTML がなければ、正確に言うのは難しいです。明確なピクセルの高さを持つラッパー div に両方を入れてから、#content と #margin div を 100% の高さにするとどうなりますか?

#wrapper{
width: 100%;
height: your height in px;
}

#container {
    /* [disabled]overflow: hidden;
*/
    height: 100%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    /* [disabled]float: left; */
    width: 960px;
    margin-left: auto;
    margin-right: auto;

}

#margin{
height:100%;
}

また、これをトラブルシューティングするために、firebug ですべての CSS を試してみてください。属性を 1 つずつ削除して、考えられる問題を見つけます。

于 2013-02-04T01:01:23.827 に答える
0

あなたはそのようなことを試すことができます：

HTML

<div>HEADER</div>

<div class="container">
    <div class="content">
        <p>Content Area</p>
        <p>row#2</p>
        <p>row#3</p>
        <p>row#4</p>
        <p>row#5</p>
        <p>row#6</p>
    </div>

    <div class="sidebar">
        Sidebar
    </div>
</div>

<div>FOOTER</div>

CSS

.container {
    width: 960px;
    padding: 10px 20px 20px;
    margin: 0 auto;    
    overflow: hidden;
}

.content, .sidebar {
    float: left;
    padding: 1%;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

.content {
    width: 68%;
    background-color: red;
}

.sidebar {
    width: 28%;
    background-color: green;
}

これにより、2 つの列が同じ高さに配置されます。

試用できるデモを作成しました。

EDIT :さまざまな有効な代替方法について説明しているCSS-Tricksに関する記事を参照してください。

于 2013-02-04T00:57:49.067 に答える