如何使两个大的div并排放置，并在所有屏幕宽度上占据相同的宽度

Question

所以我正在建立一个使用此设置的网站。导航，面板和主要内容区域。内容区域填充了将由媒体查询调整大小的div。问题是我希望面板是一个固定的宽度，并且主要区域占据所有屏幕尺寸的屏幕其余部分并自动缩小尺寸。例。如果面板的255px宽度是屏幕的25％，我希望main的宽度是屏幕的下一个75％。它要么占用太多空间并使其水平滚动，要么下降到新线。什么是最好的解决方案

＆＃13;

＆＃13;

.panel {
  width: 255px;
  height: 100%;
  position: relative;
  float: left;
  background-color: orange;
}

.main {
  width: 88%;
  height: 100%;
  position: relative;
  float: left;
  background-color: red;
}

.nav {
  width: 100%;
  height: 300px;
  background-color: yellow;
}

＆＃13;

<div class="panel">
  T
</div>
<div class="main">
  <div class="nav">
    T
  </div>
  T
</div>

＆＃13;

＆＃13;

＆＃13;

LINK- https://jsfiddle.net/cn6q6keu/2/

Answer 1

我担心您必须将此规则应用于固定宽度，因此您可以将其转换为相对单位，例如％：

(target ÷ context) * 100 = result

• 目标=面板固定宽度;
• Context =父元素宽度;
• 结果=以百分比形式转换固定宽度值。

Answer 2

你可以使用float和flex来完成它。

这是一个浮动解决方案：

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

html, body{
  height: 100%;
  min-height: 100%;
}

.clear-fix:before, .clear-fix:after{
    display: block;
    content: '';
    clear: both;
}

#main{
  height: 100%;
}

.panel, .nav{
  float: left;
  padding: 15px;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}

.panel{
  background: pink;
  width: 225px;
}

.nav{
  background: red;
  width: calc(100% - 225px);
}

<div id="main" class="clear-fix">
  <div class="panel"></div>
  <div class="nav"></div>
</div>

小提琴链接：https://jsfiddle.net/3rxdub8d/5/

这是一个灵活的解决方案：

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

html, body{
  height: 100%;
  min-height: 100%;
}

#main{
  display: flex;
  height: 100%;
}

.panel, .nav{
  padding: 15px;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}

.panel{
  background: pink;
  width: 225px;
}

.nav{
  background: red;
  flex: 1;
}

<div id="main" class="clear-fix">
  <div class="panel"></div>
  <div class="nav"></div>
</div>

小提琴链接：https://jsfiddle.net/xxwsa4oh/2/