ResponI 正在尝试创建占据页面的整个高度。剩下

Posted 2023-03-06

【中文标题】ResponI 正在尝试创建占据页面的整个高度。剩下

【英文标题】：ResponI am trying to create taking up full height of the page. Left

【发布时间】：2017-03-12 11:54:03

【问题描述】：

我正在尝试创建两个<div> 列，p 整个页面高度。左我正在尝试创建两个<div> 列，两个<div> 都占据了页面的整个高度。左我正在尝试创建两个<div> 列，两个<div> 都占据了页面的整个高度。左

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不适合您。

【参考方案1】：

你应该在 CSS 中使用 calc()。

这是一个示例代码。

HTML

<div class="container">
  <div class="fluid">
    Fluid
  </div>
  <div class="fixed">
    Fixed
  </div>
</div>

CSS

.container 
  width: 100%;


.fluid 
  float: left;
  background: #F8E71C;
  width: calc(100% - 200px);


.fixed 
  float: left;
  background: #B8E986;
  width: 200px;

演示：https://jsfiddle.net/0w2qjtz7/

【讨论】：

为什么要让容器浮动？

如果没有必要，别管它。

【参考方案2】：

尝试使用最小宽度并使用引导框架，这将为您提供不同的网格选项

https://getbootstrap.com/examples/grid/

【讨论】：

你的意思是这样说plnkr.co/edit/6J1mBWlfyPxtkfTcH7tL?p=preview