Question

所以，我试图制作一个带有背景图片和镶嵌不透明面板的网页。

我试图让面板一直向下拉到页面底部，底部有一些em填充。

我还希望面板周围的填充均匀。我需要它向下伸展以适应它所处的任何显示，并且需要它是动态的。

我已经在html，正文和面板样式部分（min-height，max-height，height）尝试了很多具有高度的东西，但它似乎只能工作当我硬编码像素值。下面是我的CSS和HTML。

有没有人对如何做这样的事情有任何想法？

        html {
            height: 100%;
            background: url(images/background_blurred.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        body {
            height: 100%;
            background: transparent;
            color: rgb(240, 240, 240);
        }

        .panel {
            height: 100%;
            background-color: rgba(10, 10, 10, 0.8);
        }


<body>

    <div class="container">
        <div class="row">
            <div class="panel panel-default">


            </div>
        </div>
    </div> 
</body>

Answer 1

将高度：100％应用到container和row div。

.container, .row{height:100%}

DEMO

Twitter Bootstrap嵌入式面板具有均匀填充/边距？

1 个答案: