0

私は友人の Web サイトの CSS レイアウトに取り組んでおり、いくつかの問題に遭遇した可能性があります。うまくいけば、あなたは私を助けることができます.

body と content blog div を含む html があります。コンテンツ ブログ div 以外はすべて正常に動作しているようです。以下の設定では、html 出力は高さ 0 のコンテンツ ブログ div のみを返します。ただし、高さを固定した場合にのみ、ページに正常に表示されます。

ここでの私の質問は、この場合、常に div に固定の高さを設定する必要がある理由です。CSS 仕様への参照はありますか? これもここでフィドルに作成されます: http://jsfiddle.net/benmore/yZL4U/1/ 私の予想される出力はここにあります: http://jsfiddle.net/benmore/yZL4U/2/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

        <style type="text/css">

            body{
                width: 960px;
                margin-left:auto;
                margin-right:auto ;
                margin-top: 0px;
                background:#5d9ab2 url(https://lh5.googleusercontent.com/-ZBLYo1oD6bM/UHox3oBICxI/AAAAAAAAAgo/yCg6TcxLeC4/s358/img_tree.png) no-repeat top left;
                background-position: 200px 0px;
                height: 100%;
            }


            .content_blog{
                background: url(https://lh4.googleusercontent.com/-6vbAw73oSYI/UHqHD-7GLlI/AAAAAAAAAg8/3eDurdBo2wE/s191/blog_topic.jpg) top left no-repeat;
                width: 920px;
                margin: 0px 20px 0px 20px;
                /*-- height: 200px; --*/
            }


        </style>
        <title></title>
    </head>
    <body class="homepage">
        <div class="content_blog"></div>
    </body>
</html>
4

2 に答える 2

1

http://jsfiddle.net/calder12/yZL4U/4/に見られるように、.content-blog div に min-height を設定します。その理由は、div に実際にはコンテンツがないためです。ブラウザは背景画像をコンテンツとして認識しないため、div が空であると想定し、高さ 0 でレンダリングします。

于 2012-10-14T09:55:57.440 に答える
0

高さの代わりに yhis コードを使用します

.content_blog{
            background: url(https://lh4.googleusercontent.com/-6vbAw73oSYI/UHqHD-7GLlI/AAAAAAAAAg8/3eDurdBo2wE/s191/blog_topic.jpg) top left no-repeat;
            width: 920px;
            margin: 0px 20px 0px 20px;
            min-height:500px;
        }

min-height 動的高さの使用 よろしくお願いします

于 2012-10-14T09:54:53.413 に答える