0

長年のJavaプログラマーで、CSS/HTML全般にかなり慣れていません。これが私が取り組んでいる私のポートフォリオサイトです。

www.zdware.com/projects.html

大きくないブラウザウィンドウでアクセスすると、コンテンツが別のdivに流出します。現在、パディングを追加したので、こぼれるわけではありませんが、コンテンツがプッシュダウンされています（スペースがあるように見えますが、奇妙な理由で）。

私はいくつかの「ハックな」ものを使って次のようにしています。

margin-bottom: -10000px;
padding-bottom: 10000px;

真ん中の私の2つの「列」のために。これはそれと何か関係がありますか？

私が持っている2つの列はこれによって影響を受けます。

.sidebar1 {
    float: left;
    min-height: 100%;
    min-width:250px;
    width: 20%;
    background-color:gray;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}
.content {
    padding: 10px 0;
    width: 80%;
    float:right;
}

.content section{
    padding-left:30px;
}

.contentにmin-widthを追加しようとしましたが、実際には何もしません。ページにはかなり大きな画像がありますが、それでも収まるはずです。

視覚的に詳しく説明します。

ブラウザウィンドウが大きくない場合（17〜18インチ未満のモニターのフルスクリーン）はどうなりますか

大きなブラウザウィンドウでどのように見えるか..意図された外観

これを機能させたい私の好ましい方法は、コンテナではなく、非「コンテナ」セクション（サイドバーとコンテンツタグの両方を保持する）を短くすることです。

また、これはよくある問題だと思います。ただし、CSSのあり方を扱うと、（自分の問題に基づいて）他の誰かのソリューションを実装すると、別のコードが機能しなくなるのではないかと感じます。

4

1 に答える 1

1

min-width: 250px;ルールは、 divがサイドバーの下に配置される.sidebar1原因です。.contentそれを取り除くと、コンテンツ列が正しい位置に移動します。

ロゴの扱い方については、そのスペースに収まるようにロゴをバンプするか、列の幅に関係なく常にその列に収まるようにcssにパーセンテージ幅を設定します。

そして、ええ、私は10000pxのネガティブマージンハックを失うでしょう。

于 2012-10-11T02:06:07.183 に答える