如何摆脱页面右侧的空白？答案

【问题标题】：How can I get rid of whitespace on the right side of my page?如何摆脱页面右侧的空白？
【发布时间】：2021-12-18 15:44:38
【问题描述】：

我有一个我正在尝试设计的网页，但我被页面右侧的持久空白卡住了。我曾尝试重置浏览器默认设置，但这对页面没有影响。我还尝试确保父元素都具有声明的大小，但这也没有影响。

网页：

html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.navbar {
  height: 5%;
  background-color: #181818;
}

.siteContainer {
  color: #ffffff;
  width: 100%;
  height: 100%;
  margin: 0;
}

.siteBody {
  height: 100%;
}

.searchArea {
  background-color: #181818;
}

.resultArea {
  background-color: #121212;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container siteContainer">
  <div class="row navbar">
    <div class="col col-2 ">
      Logo
    </div>
    <div class="col col-10 ">
      Navbar
    </div>
  </div>
  <div class="row siteBody">
    <div class="col col-2 searchArea">
      Search and CRUD
    </div>
    <div class="col col-10 resultArea">
      Results
    </div>
  </div>
</div>

【问题讨论】：

请用正确的库导入更新问题，并使问题在小提琴中重现
我看到max-width: 1320px; 可能就是这样。 Bootstrap 没有填满页面
getbootstrap.com/docs/5.1/layout/containers: "Bootstrap 带有三个不同的容器：.container，在每个响应断点处设置一个最大宽度；.container-fluid，它is width: 100% at all breakpoint; ..."

标签： html css twitter-bootstrap

【解决方案1】：

您正在使用具有固定最大宽度的引导程序 container 类（请参阅 https://getbootstrap.com/docs/5.1/layout/containers/）。

你想要什么container-fluid 填充 100% 的页面。

html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.navbar {
  height: 5%;
  background-color: #181818;
}

.siteContainer {
  color: #ffffff;
  width: 100%;
  height: 100%;
  margin: 0;
}

.siteBody {
  height: 100%;
}

.searchArea {
  background-color: #181818;
}

.resultArea {
  background-color: #121212;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid siteContainer">
  <div class="row navbar">
    <div class="col col-2 ">
      Logo
    </div>
    <div class="col col-10 ">
      Navbar
    </div>
  </div>
  <div class="row siteBody">
    <div class="col col-2 searchArea">
      Search and CRUD
    </div>
    <div class="col col-10 resultArea">
      Results
    </div>
  </div>
</div>

【讨论】：