Bootstrap:在导航栏下填充整个容器减去导航栏高度

Question

Bootstrap:在导航栏下填充整个容器减去导航栏高度

Mah*_*oni 10 html css size twitter-bootstrap

在使用Twitter Bootstrap设置样式并使用导航栏的页面上,我想使用Google地图地图填充导航栏下方的整个容器.为了实现这一点,我在下面添加了CSS.

我将大小html和body元素定义为100%,以便将其用于地图的大小定义.然而,该解决方案产生一个问题:

地图的高度现在与整个页面高度相同,这会产生一个滚动条,我可以滚动导航栏添加的40px.如何设置100% - 40px导航栏的地图大小？

#map {
        height: 100%;
        width: 100%;
}

#map img {
        max-width: none;
}

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

.fill { 
        height: 100%;
        width: 100%;
}

.navbar {
        margin-bottom: 0;
}

Run Code Online (Sandbox Code Playgroud)

为了完整性,HTML:

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
                <!-- Stylesheets -->
                <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
                <link rel="stylesheet" type="text/css" href="css/core.css">
        </head>
        <body>
                <div class="navbar">
                        <div class="navbar-inner">
                        </div>
                </div>
                <div class="container fill">
                        <div id="map"> 
                        </div>
                </div>
        </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

She*_*row 25

你可以用绝对定位解决问题.

.fill {
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    width: auto;
    height: auto;
}

Run Code Online (Sandbox Code Playgroud)

演示(jsfiddle)

您还可以使用导航栏.navbar-fixed-top以某种方式在#map元素内添加填充或边距.

归档时间：	13 年，4 月前
查看次数：	19830 次
最近记录：	12 年，8 月前