Question

我有一个容器div，内容和页脚就像这样

<body>
    <div class="container">
      <div class='leveln'></div>
    </div>
    <div class="footer">
      <p>Copyright &copy; 2014</p>
    </div>
</body>

我给身体提供了100％的身高。对于'leveln'课程，我有一个背景图像。

.leveln{
    width: 100%;
    height: 80%;
    margin: 0 auto !important;
    position: relative;
    background-image: url('/resources/img/head/f3.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

问题是背景图像没有进入，即没有为容器提供高度。但是，如果我为容器提供高度，当我通过ajax将内容添加到容器时，我的页脚不会下降。

overflow:auto is working.

但它显示了不必要的滚动条。

任何帮助表示赞赏。感谢

Answer 1

我希望它可以帮助你将css规则应用于html标签。

<!DOCTYPE html>
<html>

    <head>
       <style>
       .maincontainer {
           width:100%;
           height:768px;
           position:relative;
           margin:0px auto;
           background:hsla(0,0%,100%,1)
       }
       .container {/* At first you have to set the main container rule.You have to set the minimun property to 
       call the child div .If you do it you will be able to see the image*/
           width:600px;
           height:350px;
           margin:0px auto;
           position:relative;
           box-shadow: 0 0 18px #3D2828;
           border-radius:10px;
           bottom:50px;
           top:30px;
       }
        .leveln{
            width: 590px;
            height: 345px;
            margin: 0 auto !important;
            position: relative;
            background-image: url(../Images/Car/lotus_concept_car-wide.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
            border-radius:10px;
            border:3px solid #c5fc3f;

        }
        .footer {
            width:100%;
            height:150px;
            margin:0px auto;
            border:3px solid #CCC;
            border-radius:10px;
            position:relative;  
            top:265px;          
        }
        .footer>p {
            color: #006699;
            font-family: 'Comic Sans MS',Geneva,sans-serif;
            font-size: 14px;
            height: 20px;
            margin: 0 auto;
            position: relative;
            top: 126px;
            width: 200px;
        }
       </style>
    </head>

    <body>
      <div class="maincontainer">

            <div class="container">
                    <div class='leveln'></div>
            </div>
            <div class="footer">
                          <p>Copyright &copy; 2014</p>
            </div>
       </div>
    </body>
</html>

enter image description here

HTML高度和背景图像问题

1 个答案: