将屏幕分为四个块

Question

我的目标是把我的屏幕分成四个大小不同的块，就像图片中一样（块一和块二应该是相同的大小）。我尝试使用引导程序，它有点工作，但它使它可滚动，我想避免这种情况。有没有办法让它不可滚动并使每个块的大小固定？任何提示将不胜感激。我正在使用引导程序和 angularjs。

这是我目前所拥有的，但我想做全屏。 https://codepen.io/BrunoTrax/pen/XWWVNgL

<style>
    .wrapper {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: [col1-start] 100px  [col2-start] 100px  [col3-start] 100px [col3-end];
        grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
        background-color: #fff;
        color: #444;
      }

      .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
      }

      .a {
        grid-column: col1-start / col3-start;
        grid-row: row2-start ;
      }
      .b {
        grid-column: col3-start ;
        grid-row: row1-start / row2-end;
      }
      .c {
        grid-column: col1-start;
        grid-row: row1-start ;
      }
      .d {
        grid-column: col2-start ;
        grid-row: row1-start ;
      }
</style>
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

Answer 1

您应该查看 CSS“网格”。基本上，您可以在您的 CSS 中声明一个网格，并使用 grid-template-columns 属性以各种排列方式显示您的块。 Here 是一个很好的资源，可以向您展示如何创建自定义布局。

grid 属性还允许您声明一个高度和宽度，这将解决您的滚动问题。

检查一下并开始实验。

CSS

.grid {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

.grid > header {
  grid-area: head;
  background: #eee;
}

.grid > navLeft {
  grid-area: nav;
  background-color: #a072;
}

.grid > main {
  grid-area: main;
  background-color: #8510ff;
}

.grid > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

HTML

  <header> Hello</header>
  <navLeft> Hello</navLeft>
  <main> Hello</main>
  <p> Hello</p>
  <p> Hello</p>
</div> ```