使用twitter bootstrap(2),我有一个带导航栏的简单页面,在里面container我想添加一个100%高度的div(到屏幕底部).我的css-fu生锈了,我无法解决这个问题.
简单的HTML:
<body>
<div class="navbar navbar-fixed-top">
<!-- Rest of nav bar chopped from here -->
</div>
<div class="container fill">
<div id="map"></div> <!-- This one wants to be 100% height -->
</div>
</body>
目前的CSS:
#map {
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
我已按照下面的建议为填充类添加了高度.但是,问题在于我在主体上添加了一个填充顶部以考虑顶部的固定导航栏.这会影响"map"div的100%高度,这意味着会添加一个滚动条 - 如下所示:http://jsfiddle.net/S3Gvf/2/有谁能告诉我如何修复？
我试图让container-fluid第二个row伸展到剩余的高度,但我找不到办法做到这一点.
我已经尝试设置align-items/align-self到stretch,但也不能工作.
以下是我的代码结构:
<div class="container-fluid"> <!-- I want this container to stretch to the height of the parent -->
<div class="row">
<div class="col">
<h5>Header</h5>
</div>
</div>
<div class="row"> <!-- I want this row height to filled the remaining height -->
<widgets [widgets]="widgets" class="hing"></widgets>
<div class="col portlet-container portlet-dropzone"> <!-- if row is not the right to stretch the remaining height, this column also fine -->
<template row-host></template>
</div>
</div>
</div>
我正在使用Bootstrap 4 …
这可能是一个非常简单的问题,但我已经离开CSS场景一段时间了,我似乎无法弄明白.我正在使用Bootstrap框架,我有一个固定的页眉和页脚.其间的容器包括导航栏和内容区域.我希望该容器填充页眉和页脚之间的整个空间(100%高度).
这是项目的jsFiddle:http://jsfiddle.net/NyXkt/2/
这是当前的html结构:
<div id="wrapper">
<!-- Header -->
<div class="container-fluid no-padding header">
<div class="row-fluid fill-height">
<!-- Header Left -->
<div class="span2">
<p class="center-text">Left</p>
</div>
<!-- Header Middle -->
<div class="span8">
<p class="center-text">Middle</p>
</div>
<!-- Header Right -->
<div class="span2">
<p class="center-text">Right</p>
</div>
</div>
</div>
<!-- Content Wrapper -->
<div class="container-fluid no-padding fill">
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav-fixed no-padding">
<ul id="nav">
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Sub-Item 1 a</a>
</li>
<li><a href="#">Sub-Item 1 b</a>
</li>
<li><a …我有一个带导航栏的页面.我想在页面中添加响应式背景图像(而不是导航栏).
如果我将页面设置为100%高度,则会使用滚动条溢出页面.
该如何实现？我不知道.
.bg {
/* The image used */
background-image: url("http://via.placeholder.com/350x150");
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a …