扩展身体背景图像/身体不如html高

时间:2010-12-02 21:33:05

标签: html css

我有两张背景图片,一张是html,另一张是正文。但由于某种原因,身体不会延伸到窗户的整个高度,因为它应该。或者,更具体地说,有一个......可能是50px的空间,身体的BG没有显示出来。我确实在内容的底部有一个余地(似乎没有显示,但并不是什么大不了的)是50px,但我删除了它仍然问题仍然存在。 You can see the problem here.我无法弄明白为什么。有任何想法吗?也许我错过了一些基本的东西......

编辑:

我有,是的。我认为HTML Image可能太大了,它不想过多地拉伸身体的图像,但这没有意义,所以。

我打算发布代码,但手头没有。现在是:

<!DOCTYPE HTML PUBLIC "-///W3C///DTD HTML 4.01 Transitional///EN" "http:///www.w3.org/TR/html4/loose.dtd">
    <head>
        <script type="text/javascript" src="../_script/jquery-1.4.3.min.js"></script>
        <script type="text/javascript" src="../_script/jquery.fancybox-1.3.4.pack.js"></script>
        <link rel="stylesheet" href="../_script/jquery.fancybox-1.3.4.css" type="text/css" />

        <link rel="stylesheet" href="../_script/page_photo.css" type="text/css" />
        <script type="text/javascript">
            $(document).ready(function() {
                $("a.single_image").fancybox();
            });
        </script>
        <style type="text/css">
            /*v Reset v*/
            html,body,div,span,h1,h2,h3,h4,h5,h6,hr,p,a,abbr,acronym,address,big,del,em,img,
            small,strike,strong,sub,sup,ul,ol,fieldset,form,label,legend,
            table,caption,tbody,tfoot,thead,tr,th,td,optgroup,option
            {   margin: 0; padding: 0; border: 0; outline: 0;
                text-align: left; vertical-align: middle;
                text-decoration: none; list-style: none;
            }
            /*^ Reset ^*/
            html
            {   height: 100%; min-width: 1000px;
                background: url("../_images/Wall.jpg");
                margin: 0; padding: 0;
            }
            body
            {   height: 100%; min-width: 1000px;
                background: url("../_images/NAV_BG-HALF.png") repeat-y;
                font: 300 12px/22.0px Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
                color: #bdb798;
            }
            a:link              { color: #bdb798; text-decoration: none; }
            a:visited           { color: #333333; text-decoration: none; }
            a:hover             { color: #d8e5c2; text-decoration: none; }
            a:active                { color: #a5a49f;  text-decoration: none; }
            #nav a:link         { color: #bdb798; text-decoration: none; }
            #nav a:visited      { color: #9e9c7a; text-decoration: none; }
            #nav a:hover        { color: #d8e5c2; text-decoration: none; }
            #nav a:active       { color: #9e9c7a; text-decoration: none; }

            #header
            {   height: 80px;
                margin-bottom: 50px; padding: 10px;
                background: #2e2d29;
                border-bottom: 1px solid black;
                background-image: url("../_images/head-bg.png")
            }

            @import url("constant.css");
            #nav
            {   width: 119px; height: 528px;            /*minus padding+border*/
                margin-right: 60px; padding: 10px;
                border: 1px solid black; border-left: 0;
                background: #2a2727;
                *padding: 10px 0 10px                   /*IE*/
                *width: 119px;                              /*IE*/
                float: left;
            }
            #nav ul { margin: 0 10px; }
            #nav hr
            {   margin: 5px -10px;
                color: #848678;
                border: 0; border-bottom: 1px solid black;
                *margin: 5px 0 5px 10px;
                *width: 99px;
            }
            #content
            {   min-height: 90%; overflow: hidden; 
                padding: 0 30px;
                border: 1px solid black; border-right: 0;
                background: #2a2727;
                *padding: 0 30px 0 30px;                            /* ???? */
                *font-size: 20px;
            }
            #content hr
            {   margin: 0 -30px;
                clear: both; 
                border-top: 1px solid #010101; border-bottom: 1px solid #4a4a4a;
                *margin: 0 0 0 -30px;
                *width: 106%;
            }
            #content .bio
            {   width: 70%; max-height: 220px; overflow: auto;
                margin: 0 20px 20px 0; padding: 10px;
                float: right; 
            }
            #content h2.author { margin: 5px 0; text-align: right; *font-size: 20px; }
            #content .bio p { line-height: 1.25; text-align: right; }
            #content .work
            {   width: 100%; height: 660px; overflow: auto;
                padding: 10px;
                clear: both;
            }
            #content .work img { vertical-align: center; border: 4px double grey; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="../_images/logo.png" />
        </div>
        <div id="nav">
            Photography
            <ul>
                <li><a href="google.com">Beth Balmforth</a></li>
                <li><a href="google.com">Kristen Popcheff</a></li>
                <li><a href="google.com">Krystle Parker</a></li>
                <li><a href="google.com">Renee Blanchord</a></li>
                <li><a href="google.com">-RESERVED-</a></li>
                <li><a href="google.com">-RESERVED-</a></li>
            </ul>
            <hr />
            Poetry
            <ul>
                <li>Rebecca R. Pierce</li>
                <li>Justin Louras</li>
                <li>-RESERVED-</li>
            </ul>
            <hr />
            <a href="../about.html">Home</a><br />
            <a href="../about.html">About</a><br/>
            <a href="../about.html">Submit</a><br />
        </div>

        <div id="content">
            <h2 class="author">Beth Balmforth</h2>
            <div class="work">
                <img src="-photo-images/beth-balmforth_01.jpg" alt="Get 'em Tiger by Beth Balmforth" title="Get 'em Tiger by Beth Balmforth" />
            </div>
            <hr />
            <div class="bio">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dui odio, pulvinar luctus gravida in, varius ac est. Sed dapibus, felis sed placerat dignissim, urna magna egestas ante, aliquet tincidunt lacus ligula eu dui. Pellentesque pellentesque magna sed tortor ultricies lobortis. Mauris ultrices iaculis est, id vestibulum dolor molestie at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas rhoncus gravida neque, vitae posuere ipsum sodales sed. Cras adipiscing sagittis magna id varius. Quisque ut ligula eget justo volutpat adipiscing quis ut purus. Proin sollicitudin velit ac justo dictum adipiscing. Curabitur at sodales est. Praesent aliquam volutpat est, vel dignissim sapien dignissim non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                </p>
            </div>
        </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

你试过设置:

html, body {
    width:100%;
    height:100%;
}