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

时间:2018-03-06 00:13:25

标签: html css

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



.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;
}

<div class="panel">
  T
</div>
<div class="main">
  <div class="nav">
    T
  </div>
  T
</div>
&#13;
&#13;
&#13;

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

2 个答案:

答案 0 :(得分:0)

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

(target ÷ context) * 100 = result
  • 目标=面板固定宽度;
  • Context =父元素宽度;
  • 结果=以百分比形式转换固定宽度值。

答案 1 :(得分:0)

你可以使用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/