HTML高度100%导致页面溢出_Html_Css

HTML高度100%导致页面溢出

html css

HTML高度100%导致页面溢出,html,css,Html,Css,我正在尝试制作一个包含两个div的html页面：“top”和“main” 顶部的必须取代其包含的元素，主必须取代所有剩余的位置以下是我尝试过的： CSS代码： html,body{ height:100%; } #top{ background-color : red; padding:10px; border:1px solid; } #main{ background-color : blue; height:100%; padding:10px; bo

我正在尝试制作一个包含两个div的html页面：“top”和“main”

顶部的

必须取代其包含的元素，主

必须取代所有剩余的位置

以下是我尝试过的：

CSS代码：

html,body{
  height:100%;
}

#top{
  background-color : red;
  padding:10px;
  border:1px solid;
}

#main{
  background-color : blue;
  height:100%;
  padding:10px;
  border:1px solid;
}

#content1{
  background-color:yellow;
}

#content2{
  background-color:yellow;
  height :100%;
}

<!DOCTYPE html>
<html>
  <head></head>
  <body>

    <div id="top">
      <div id="content1">content1</div>
    </div>

    <div id="main">
      <div id="content2">content2</div>
    </div>

  </body>

</html>

   html,body{
      height:100%;
      Padding:0; 
      margin:0;
      border:0;}

HTML代码：

html,body{
  height:100%;
}

#top{
  background-color : red;
  padding:10px;
  border:1px solid;
}

#main{
  background-color : blue;
  height:100%;
  padding:10px;
  border:1px solid;
}

#content1{
  background-color:yellow;
}

#content2{
  background-color:yellow;
  height :100%;
}

<!DOCTYPE html>
<html>
  <head></head>
  <body>

    <div id="top">
      <div id="content1">content1</div>
    </div>

    <div id="main">
      <div id="content2">content2</div>
    </div>

  </body>

</html>

   html,body{
      height:100%;
      Padding:0; 
      margin:0;
      border:0;}

下面是相应的CSS代码：

<!DOCTYPE html>
<body>
  <div id="content1" class="row">
    <div class="subcontent">
      <div class="subContentContainer">
         content1
      </div>
    </div>
  </div>
  <div id="content2" class="row">
    <div class="subcontent">
      <div class="subContentContainer">
        content2
      </div>
    </div>
  </div>    
</body>

html,body{
  padding:0;
  margin:0;
  height:100%;
  width:100%;
}

body{
  display:table;
}

.row{
  display:table-row;
  width:100%;
}

#top{
  height:100px;
}

#content1{
  background:#aa5555;
  padding:10px;
}

#content2{
  background:#5555AA;
  height:100%;
}

.subcontent{
  padding : 10px;
  height:100%;
}

.subContentContainer{
  background-color:yellow;
  height:100%;
}

这里是相应的。

试试这个：

CSS:

html,body{
  height:100%;
}

#top{
  background-color : red;
  padding:10px;
  border:1px solid;
}

#main{
  background-color : blue;
  height:100%;
  padding:10px;
  border:1px solid;
}

#content1{
  background-color:yellow;
}

#content2{
  background-color:yellow;
  height :100%;
}

<!DOCTYPE html>
<html>
  <head></head>
  <body>

    <div id="top">
      <div id="content1">content1</div>
    </div>

    <div id="main">
      <div id="content2">content2</div>
    </div>

  </body>

</html>

   html,body{
      height:100%;
      Padding:0; 
      margin:0;
      border:0;}

是否有一个神奇的css属性来修复此问题

有。它被称为

box size

有关长方体大小属性的详细信息，请阅读

所以如果你的标题是说64px高，那么你会这样做：

.container{
身高：100%；
背景：粉红色；
利润上限：-64px；
填充顶部：64px；
-moz框大小：边框框；
框大小：边框框；
}

标题
满足于此

我经常做的是制作一个没有填充的容器，使其最小高度为100%，并让我的内容具有适当的高度（自动）：

这将产生如下结果：

#container {
    background-color : #5555AA;
    min-height: 100%;
}
#content2 {
    background-color:yellow;
    margin: 10px;
}

我不知道这是否正是你想要的，但你不能在没有绝对化的情况下，仅仅“填满还押空间”就进行div。你也不真正想要的东西

由于两个div都在使用html和body标记上设置的100%高度，您只需将其设置在那里，然后将边距和填充设置为零。通常情况下，如果必须将一个div及其父div都设置为100%高度，那就太过分了。

为此，必须使用

display:table

进行编辑

html，
身体{
身高：100%；
宽度：100%；
}
身体{
显示：表格；
}
.行{
显示：表格行；
宽度：100%；
背景：红色；
}
#顶{
高度：100px；
}
#内容1{
背景：黄色；
身高：100%；
}
#内容2{
溢出：滚动；
身高：100%；
边框：1px纯黑；
}


内容1
内容2

为什么要将主要内容放在底部？也许您希望在页面底部有一个页脚？您的HTML中缺少DOCTYPE。稍后，我将在黄色区域周围添加边框。然后，如果主要内容的高度与区域一样大，我会放置滚动条。对于用户来说，我认为如果这个区域的大小不变，它会更干净。@w4rumy为了简单起见，我没有把它放在这个例子中。在这种特殊情况下，这很重要吗？@adenoyelle缺少DOCTYPE意味着您的浏览器进入怪癖模式并以不同方式呈现元素。因此，如果任何东西都不起作用，并且示例缺少DOCTYPE，那么我们将基于非标准HTML文档进行工作。所以我总是建议先添加DOCTYPE——经验表明很多bug会消失。我尝试的两种浏览器（Linux上的Chrome和FF）的渲染都不正确。您的浏览器是否正确？@MrLister:对不起。我错了。我厌倦了设置body的高度（我想创建一个带有页脚的应用程序）。但现在我看到了这个链接：我想没有更好的方法了。因此，这可能是最好的解决方案。从您的示例开始，我可以调整它以完全满足我的要求：