边栏宽度问题

Question

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

“我的问题”

标题始终以1140px的宽度居中 主要内容宽度约为70％，最大宽度为912px。

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

如果您在“设计”分辨率下查看网站，它看起来是正确的，但如果您使窗口更大，则不会跟随。它应始终保持不变，因此侧边栏内容始终位于标题左边缘的“内部”。

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

Answer 1

根据您的要求，标题的最小宽度为1140px，因此我的“解决方案”基于该数字。对于完全响应，这应该是％和媒体查询使用。

通过使用一些额外的包装纸，我认为我们可以管理你所追求的东西。

**基本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