Question

假设我有一个页面，在该页面中，我有一个名为div的{{1}}：

在样式标签中，我会写一些类似的东西：

#bar

我想编写CSS，以便<style> #bar { width: 100px; } </style>根据页面的div自动调整其高度。我将在不同的页面中使用相同的height，并根据其所在的页面自动调整其div。有没有办法做到这一点？

让我更具体一点。假设我的代码是这样的：

height

现在，我会将段落复制并粘贴几百次，这样我的页面大小就会增加。我希望我的<style> #example{ float:right; } #bar { width: 100px; height:100%; border: 1px solid red; box-sizing: border-box } </style> <div id="example"><p>This is page content</p><p>This is page content</p></div> <div id="bar"></div>在将段落复制粘贴一百次后自动调整div，以便height覆盖页面的上下。有没有办法做到这一点？

Answer 1

向create or replace procedure p as begin execute immediate 'create table emp_1 as (select * from emp)'; end; sql>exec p;提供height: 100%。

.bar

另外，此处需要注意的是，您应该.bar { height: 100%; } height: 100%和html。

body

Answer 2

您可以使用position:absolute;，如下所示：

#bar {
   position:absolute;
   left:0px;
   top:0px;
   right:0px;
   bottom:0px;
}

Answer 3

对于纯CSS解决方案，您可以使用@media根据窗口大小更改div的大小：

@media screen and (max-height: 600px) {
      #bar {
         width: 90%;
         height: 90%;
         overflow: hidden;
      }
   }

这将允许您根据窗口的参数设置准确的高度。

Here is a JSFiddle Demo

Div根据页面高度自动调整高度

3 个答案: