相关疑难解决方法(0)

我想让身体拥有100%的浏览器高度.我可以使用CSS吗？

我试过设置height: 100%,但它不起作用.

我想为页面设置背景颜色以填充整个浏览器窗口,但如果页面内容很少,我会在底部看到一个丑陋的白色条.

如何获得具有可滚动内容的固定页眉,页脚？像这个页面的东西.我可以看一下获取CSS的源代码,但我只想知道我需要的最小CSS和HTML才能实现这一点.

我想将Dasboard h1置于附加标记中心.我不可能知道div的大小,或者我可以设置高度:对于每个前面的div为100%.

我本以为这可以用flexbox实现,但我看到的每个例子都有100%的高度或者所有父元素的高度:100vh.我可以使用display:table或dispaly:table-cell如果是这种情况.

html {
  min-height: 100%;
  position: relative;
}

body {
  height: 100%;
  background-color: #f7f7f4;
}

#root {
  height: 100%;
  padding-bottom: 170px;
}

.wrapper {
    max-width: 750px;
}

.grid {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: -30px;
}

.grid__item {
    display: inline-block;
    padding-left: 30px;
    vertical-align: top;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.one-half {
    width: 50%;
}

.private-banner__container {
    height: 98px;
}

.private-banner__layout {
    width: 100%;
    height: 100%;
    display: table;
}

.private-banner__right, .private-banner__left {
    display: table-cell;
    vertical-align: …

我们需要为div的溢出文本设置垂直滚动条.问题是当我们将高度设置为100%并溢出到auto时,它会扩展到其父容器之外,因为它前面有另一个兄弟div.这是一个例子:

<style type="text/css">
    .container {height: 100px; width: 100px; border: solid;}
    .titlebar {height: 2em; background: gray;}
    .app-body {height: 100%; overflow: auto; background: lightblue;}    
</style>

...

<div class="container">
    <div class="titlebar"></div>
    <div class="app-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.</div>
</div>

app-body设定为100%,则它以具有100像素的高度,这使得它溢出超出的底部container通过2em.我们尝试根本不使用高度app-body但是导致它溢出而没有显示滚动条.

我知道我们可以将高度设置为较小的百分比或固定数量的像素,但如果字体大小改变,这将导致我们的问题.如果高度100% - 2em有效,那么这将是我们试图定义的.