在不知道高度或能够设置高度100％的情况下抓住div的可用高度

时间：2018-01-30 19:33:16

标签： html css

我想将Dasboard h1置于附加标记中心。我不可能知道div的大小，或者我可以为此设置高度：100％为每个前面的div。

我原本以为这可以用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: middle;
}

.footer__footer {
    padding-top: 48px;
    padding-bottom: 48px;
}

ul {
    margin-left: 38px;
    margin-left: 2.375em;
}

.footer__footer ul li:not(last-of-type) {
    margin-right: 48px;
}

.footer__footer li {
  display: inline;
}
<html lang="en">

  <body>
    <div id="root">
      <header role="banner">
        <div class="wrapper private-banner__container">
          <div class="grid private-banner__layout">
            <div class="grid__item one-half     private-banner__left"><h1>Logo</h1></div>
            <div class="grid__item one-half     private-banner__right"><a href="/business/dashboard">Home</a><a class="link__default" tabindex="0">Log Out</a></div>
          </div>
        </div>
      </header>
      <div>
        <div class="wrapper">
          <div class="grid">
            <div class="grid__item     ">
              <h1>Dashboard</h1></div>
          </div>
        </div>
      </div>
      <footer class="footer__footer">
        <div class="wrapper">
          <div class="grid">
            <div class="grid__item     ">
              <ul>
                <li><a target="_blank" href="/static/about">About</a></li>
                <li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
                <li><a target="_blank" href="/static/cookies">Cookies</a></li>
                <li><a target="_blank" href="/static/privacy">Privacy</a></li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </body>

</html>

3 个答案:

答案 0 :(得分：7)

如果我是对的，你正在努力实现这样的目标。

<header id="header" height="120px"></header>
<div    id="content" height="fill the rest of the height"></div>
<footer id="footer" height="120px"></footer>

在这种情况下，您需要使用 CSS flex 。 Flex在没有任何修复的情况下水平工作，因为默认情况下，任何块级元素都有width=100%，即填充父级的整个可用宽度。但没有默认高度。块元素的高度计算为其所有孩子的高度的总和。 div的默认高度是内容的高度。即使<html>，<body>标记不跨越窗口的整个高度，它也会跨越窗口内容的高度。

因此，要使弹性工作垂直并将屏幕划分为页眉，页脚和自动调整内容，您需要从顶部开始设置高度，设置<html>，<body>和{{1} }到100％

#root

现在您的html, body, #root { height: 100%; margin: 0; paddding: 0; } div占据整个屏幕高度，因此您可以使用flex设置页眉，页脚和内容高度。

#root
  

这同样的flex工作可以通过javascript完成

我们运行一个在加载页面时运行的javascript代码，计算屏幕高度并为内容div指定完美的高度，这样就可以很好地解决它。

#root {
   display: flex;
   flex-direction: column;
}
header {
    height: 120px;
}
#content {
    flex: 1;
    overflow-y: auto; /* scrollbar for content */
}
footer {
    height: 120px;
}
  

要使window.onload = function () { var headerHeight = document.getElementById('header').clientHeight; var footerHeight = document.getElementById('footer').clientHeight; var contentheight = screen.availHeight - headerHeight - footerHeight; document.getElementById('content').style.height = contentheight + 'px'; } 标题居中，只需使用text-align属性即可。

<h1>

除非您的h1 { text-align: center; } 代码指定了高度，否则您不需要将vertical-align设置为中间。

答案 1 :(得分：0)

vertical-align:middle CSS属性以及text-align:center。我总是尽量保持简单，换句话说，除非你必须添加一个包装元素，否则不要。所以，我最后做的就是删除你在那里不必要的div嵌套。

具体来说，我改变的是我添加了：

h1{
vertical-align:middle;
text-align:center;
}

然后删除了grid-item和grid div。

＆＃13;
＆＃13; 
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: middle;
}

.footer__footer {
    padding-top: 48px;
    padding-bottom: 48px;
}

ul {
    margin-left: 38px;
    margin-left: 2.375em;
}

.footer__footer ul li:not(last-of-type) {
    margin-right: 48px;
}

.footer__footer li {
  display: inline;
}

h1{
vertical-align:middle;
text-align:center;
}
＆＃13; 
<html lang="en">

  <body>
    <div id="root">
      <header role="banner">
        <div class="wrapper private-banner__container">
          <div class="grid private-banner__layout">
            <div class="grid__item one-half     private-banner__left"><h1>Logo</h1></div>
            <div class="grid__item one-half     private-banner__right"><a href="/business/dashboard">Home</a><a class="link__default" tabindex="0">Log Out</a></div>
          </div>
        </div>
      </header>
      <div>

              <h1>Dashboard</h1>

      </div>
      <footer class="footer__footer">
        <div class="wrapper">
          <div class="grid">
            <div class="grid__item     ">
              <ul>
                <li><a target="_blank" href="/static/about">About</a></li>
                <li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
                <li><a target="_blank" href="/static/cookies">Cookies</a></li>
                <li><a target="_blank" href="/static/privacy">Privacy</a></li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-1)

＆＃13;
＆＃13; 
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: middle;
}

.footer__footer {
    padding-top: 48px;
    padding-bottom: 48px;
}

ul {
    margin-left: 38px;
    margin-left: 2.375em;
}

.footer__footer ul li:not(last-of-type) {
    margin-right: 48px;
}

.footer__footer li {
  display: inline;
}
 
.grid__item.db {
  display: flex;
  align-items: center;
  justify-content: center;
}
＆＃13; 
<html lang="en">

  <body>
    <div id="root">
      <header role="banner">
        <div class="wrapper private-banner__container">
          <div class="grid private-banner__layout">
            <div class="grid__item one-half     private-banner__left"><h1>Logo</h1></div>
            <div class="grid__item one-half     private-banner__right"><a href="/business/dashboard">Home</a><a class="link__default" tabindex="0">Log Out</a></div>
          </div>
        </div>
      </header>
      <div>
        <div class="wrapper">
          <div class="grid">
            <div class="grid__item db">
              <h1>Dashboard</h1></div>
          </div>
        </div>
      </div>
      <footer class="footer__footer">
        <div class="wrapper">
          <div class="grid">
            <div class="grid__item">
              <ul>
                <li><a target="_blank" href="/static/about">About</a></li>
                <li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
                <li><a target="_blank" href="/static/cookies">Cookies</a></li>
                <li><a target="_blank" href="/static/privacy">Privacy</a></li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题