Question

我一直在为我网站的朋友制作CSS布局，但也遇到了一些问题。希望你能帮助我。

我有一个带有正文的html和一个内容博客div。除了内容博客div之外，一切似乎都很好。使用下面的给定设置，html输出仅返回内容博客div 高度为0.但是，只有当我修正了高度时，才会在页面上显示确定。

我的问题是为什么在这种情况下总是要求我为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>

Answer 1

在.content-blog div上设置最小高度，如此处所示http://jsfiddle.net/calder12/yZL4U/4/原因是div实际上没有内容。浏览器不会将背景图像视为内容，因此它假定div为空并将其呈现为0高度。

Answer 2

您使用此代码代替高度

.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;
        }

最小高度用于动态高度最好的问候

div元素高度问题

2 个答案: