HTML / CSS | 2 个相邻的 div - 左 div 250px 和右 div 100%答案

【问题标题】：HTML / CSS | 2 divs next to each other - left div 250px and right div 100%HTML / CSS | 2 个相邻的 div - 左 div 250px 和右 div 100%
【发布时间】：2017-01-12 04:01:51
【问题描述】：

首先我正在尝试对网站进行编程... 现在我的问题：

我想在我的网站左侧有一个高度为 100%、宽度为 250 像素的 div

在我网站的右侧，我想要一个高度为 100%，宽度也为 100% 的 div...

但是

如果我这样做，那么我的右侧 div 对我的显示器来说太大了，但我希望它完全适合，这样我就不需要向右滚动了..

PS：我希望左边的 div 固定在 250px 宽度上！

希望有人知道我的意思

The white one is the left div | The black one is the right div

【问题讨论】：

PPS：我想缩放我的窗口，右边的 div 需要自动更改他的宽度，以便所有内容都适合

标签： html

【解决方案1】：

您可以尝试flex：更多请访问HERE

html, body {
  height: 100vh;
}
#parent{
  display: flex;
  height: 100%;
  
  }


#child1{
  width:250px;
  background-color:green;
  }

#child2{
  flex-grow: 1;
  background-color:red;
  }

<div id='parent'>
<div id='child1'>child1</div>
<div id='child2'>child2</div>
</div>

【讨论】：

哇，谢谢！ ^^...但是如果边框不是白色，我该怎么做...所以我希望它填充 100% 的屏幕而不是 98%。
对不起，我看不出有什么不同... :o
它应该是这样的：
@Ryl0x 尝试使用视口vh 值。

【解决方案2】：

你想要两个 div 吗？这应该工作

<body style="margin: 0px; padding: 0px;">
<div id="contairofthemall" style="width: 100%;">

  <div id="divone" style="height:100%; width:250px; position: absolute;"></div>
  <div id="divtwo" style="height:100%; width:100%;  "></div>

</div>
</body>

【讨论】：

如果你想确保它有效，只需给它们两种不同的背景颜色
可以添加 display: block;属性到 div 编号 2

【解决方案3】：

html, body {}

#parent{
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
   }

#child1{
  width:250px;
  background-color:green;
  }

#child2{
  flex-grow: 1;
  background-color:red;
  }

<div id='parent'>
<div id='child1'>child1</div>
<div id='child2'>child2</div>
</div>

【讨论】：

谢谢你，Suchi ^^