html - 具有统一填充/边距的 Twitter Bootstrap 插入面板?

标签 html css twitter-bootstrap

因此,我正在尝试制作一个带有背景图像和镶嵌不透明面板的网页。

我试图让面板一直延伸到页面底部,底部有一些 em 填充。

我还希望面板周围的填充均匀。我需要它向下拉伸(stretch)以适应它所在的任何显示器,并且需要它是动态的。

我已经在 html、正文和面板样式部分尝试了很多具有高度的东西(min-heightmax-heightheight),但它似乎只在我对像素值进行硬编码时才有效。下面是我的 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>

最佳答案

也将 height:100% 应用于您的 containerrow div。

.container, .row{height:100%}

DEMO

关于html - 具有统一填充/边距的 Twitter Bootstrap 插入面板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25237221/

相关文章:

javascript - 打开用户选择的文件

css - 我可以在按钮内放置一个输入文件标签吗?

css - 自定义 Bootstrap 4 中的轮播指示器

html - 如何通过 Bootstrap 响应让 Center Div 堆栈在顶部?

html - 为什么Ie7神秘地切断了这些通知段落的上边框?

html - 如何限制我的输入类型 ="file"只接受在 Firefox 中不起作用的 png 图像文件

javascript - 如何将 html 开/关翻转开关添加到 jquery?

html - ie7占用额外空间

javascript - Angular js 以 ng 样式应用渐变

html - 子页面的 Bootstrap 链接不起作用