Question

我正在构建一个页面，该页面具有两列并排，应该填充整个页面。两列的宽度均应为可用宽度的50％，且两侧均无边距或填充，并根据分辨率占用100％的可用高度。

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body>* {
  flex-shrink: 0;
}

.login-column {
  float: left;
  width: 50%;
  background-color: #F4F6F9;
  margin: 0;
}

.news-column {
  float: left;
  width: 50%;
  background-color: #75BFF0;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
  /* Standard syntax (must be last) */
  margin: 0;
  flex-grow: 1;
}

<div class="row">
  <div class="login-column">
    <h1>Login</h1>
  </div>
  <div class="news-column">
    <h1>News</h1>
  </div>
</div>

当前，div在顶部，左侧和右侧没有填充或边距；但是，背景色仅扩展到文本的末尾。我希望背景可以扩展到页面底部，而无需滚动条。

另一方面，我正在使用div。还是建议这样做，还是我应该使用HTML5等新功能，例如article，aside等。

Answer 1

为了获得DIV来填充页面的高度，您需要使用

CSS

div {
height: 100vh;}

所有内容都在这篇文章中进行了解释： How to make a div 100% height of the browser window

Answer 2

移除浮点，您可以为列100vh添加高度，但在页面的顶部应为<meta name="viewport" content="width=device-width, initial-scale=1">

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body>* {
  flex-shrink: 0;
}
.row {
  display: flex;
}
.login-column {
  flex: 0 0 50%;
  background-color: #F4F6F9;
  margin: 0;
  height: 100vh;
}

.news-column {
  flex: 0 0 50%;
  background-color: #75BFF0;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
  /* Standard syntax (must be last) */
  margin: 0;
  height: 100vh;
}

<div class="row">
  <div class="login-column">
    <h1>Login</h1>
  </div>
  <div class="news-column">
    <h1>News</h1>
  </div>
</div>

Answer 3

您可以简单地在div类中包括height。 .login-column {高度：100％;} .login-column {height：100％;}

Answer 4

您是否尝试创建一个包含列的内容div，我会尝试类似的事情。

* {
      padding: 0;
      margin: 0;
    }
    
    body, html {
    height: 100%;
    }
    
    .columns-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .login-column {
      display: flex
      background-color: #F4F6F9;
      margin: 0;
      width: 50%;
    }

   .news-column {
     display:flex;
     background-color: blue;
     margin: 0;
     width: 50%;
     height: 100%;
   }

<div class="columns-container ">
    <div class="login-column">
        <h1>Login</h1>
    </div>
    <div class="news-column">
        <h1>News</h1>
    </div>
</div>

Answer 5

除非您绝对知道自己在做什么，否则不应使用float和position: absolute。我建议使用flex容器执行所需的操作，并使用max-height使两列（部分）填充整个屏幕高度。如果您仅使用height: 100vh，则列将保持在该高度，以防止事物溢出。

还要注意我如何使用类语法重用CSS代码。

body {
  margin: 0;
  padding: 0;
}

.flex-container {
  width: 100%;
  display: flex;
}

section {
  min-height: 100vh;
  flex-basis: 50%;
  box-sizing: border-box; /* To let padding be part of the width */
  padding: 1rem;
}

section.left {
  background-color: #F4F6F9;
}

section.right {
  background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
}

<body>
  <div class="flex-container">
    <section class="left column">
      Ladidaa
    </section>

    <section class="right column">
      Tralalaa
    </section>
  </div>
</body>

Answer 6

关于div，article和aside的使用，实际上它们用于对语义Html进行编码，以获得最佳的搜索引擎优化结果，并且其他与bots有关的活动也对其他开发人员来说很容易理解代码流。因为已经回答了很多次，所以没有回答您的主要问题，如果您对其他答案不满意，请告诉我：）

注意：在您的情况下，使用div很好，不用担心。

如何扩展div以填充整个页面

6 个答案: