Question

首先，我正在尝试编写网站... 现在我的问题是：

我希望在我网站的左侧有一个高度为100％且宽度为250px的div

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

BUT

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

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

希望有人知道我的意思

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

Answer 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>

Answer 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>

Answer 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>

HTML / CSS | 2个div彼此相邻 - 左div 250px和右div 100％

3 个答案: