css - 侧边栏宽度问题

Question

我首先向您展示我的“网站”。

“我的问题”

页眉始终居中，宽度为 1140px。
主要内容的宽度约为 70%，最大宽度为 912 像素。

我的问题是边栏无法保持正确的宽度。

如果您以“设计”分辨率查看该站点，它看起来不错，但如果您将窗口变大，则效果不佳。它应该始终保持不变，以便侧边栏内容始终位于页眉左边缘的“内部”。

我该如何实现？
侧边栏的宽度约为 23%，如果您将窗口保持在 1300 像素宽(这是设计的宽度)，它看起来就不错。

Answer 1

根据您提出的要求， header 的最小宽度为 1140 像素，因此我的“解决方案”基于该数字。对于完全响应，这实际上应该是一个 % 和使用的媒体查询。

通过使用一些额外的包装器，我认为我们可以管理您想要的东西。

** 基本 HTML **

<header>
  <div class="inner">
    THIS IS MY HEADER AREA
  </div>
</header>

<div class="nav">
  <div class="inner">
  THIS IS MY NAV BAR
</div>
</div>

  <aside>
    ASIDE
  </aside> 

<div class="inner clearfix">

  <div class="content">
    CONTENT
  </div>
</div>

** CSS **(包括一些颜色，以便您可以看到正在发生的事情。

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

html {
  text-align:center;
  font-weight: bold;
}

header {
  height:50px;
  line-height:50px;
  background:lightgreen;
}

.inner {
  width:1140px;
  margin:0 auto;
  position:relative;
  }

header .inner {
    background:lightblue;
}

.nav {
  height:50px;
  background:pink;
  line-height:50px;
}

.nav .inner {
  background:NavajoWhite;
}



aside {
  width:20%;
  min-width:218px;
  height:400px;
  background:blue;
  margin-top:10px;
  position:absolute;
  left:10px;

}

.content{
  height:450px;
  background-color: orange;
  width:70%;
  float:right;
  max-width:912px;
  margin-top:10px;
}

Codepen Example