侧边栏宽度问题

Question

我先向你展示我的“网站”。

“我的问题”

标题将始终以 1140 像素的宽度居中。
主要内容的宽度约为 70%，最大宽度为 912 像素。

我的问题是侧边栏不会保持正确的宽度。

如果您以“设计”分辨率查看该站点，它看起来是正确的，但如果您将窗口放大，它就不会跟随。它应该始终保持不变，以便侧边栏内容始终位于标题的左边缘“内部”。

我将如何实现这一目标？
侧边栏的宽度约为 23%，如果您将窗口保持在 1300 像素宽（这是设计的宽度），它看起来是正确的。

Answer 1

根据您的要求，标题的最小宽度为 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