在css中height:100%;不起作用！

Posted 2023-05-15

最外层的高度是自动，左边有实际高度，右边暂时没内容。这个时候最外层跟左边的高度一样了，因为最外层是自动的，跟着里面的高度而变化。但我想让右边的高度也跟着变化，但是右边没有内容就没有高度，现在我想让右边也跟着变化 该怎么办

参考技术A 可以尝试用min-height:**px;和_height:**px;适应不同浏览器，意图都是设置最小高度值，祝你好运！ 参考技术B 没办法，除非你用javascript。。。追问

那你能不能提供一下代码呢 谢谢

追答

你可以这样比如左边的div的id叫divLeft右边的叫divRight

var leftHeight,rightHeight;
leftHeight = document.getElementById("divLeft").style.Height;
righttHeight = document.getElementById("divRight").style.Height;
leftHeight = righttHeight = leftHeight > rightHeight ? leftHeight : rightHeight;

本回答被提问者和网友采纳

CSS-边距顶部不起作用

【中文标题】CSS-边距顶部不起作用

【英文标题】：CSS- margin-top not working

【发布时间】：2016-12-06 08:54:01

【问题描述】：

#modal 
  background-color: #f0f0f0;
  //border: thin red solid;
  height: 500px;

#category_main 
  width: 75%;
  height: 200px;
  border: thin red solid;
  display: block;
  margin: 0 auto;
  margin-top: 5%;

<div id="modal">
  <div id="category_main"></div>
</div>

当我运行 then 时，margin-top 不起作用。 div category_main 与它所在的 div 一起下降。我不想要那个白色的部分。而不是 ，只有那个红色边框的框应该受到margin-top 的影响。

谢谢。

任何帮助将不胜感激。

【问题讨论】：

Why does this CSS margin-top style not work?的可能重复

【参考方案1】：

不应将margin-top 应用于#category_main，而应将padding-top 应用于#modal，因为前者会留下空白，但后者包含相同的内容：

#modal
    background-color: #f0f0f0;
    //border: thin red solid;
    height: 500px;
    padding-top: 5%;

查看演示here

【参考方案2】：

我认为你的做法是错误的。您想在外部 div 上放置填充。

 padding-top: 5%;

【参考方案3】：

将overflow:hidden 添加到父级，以便父级获得您指定的真实高度..

这里是 sn-p

#modal
        background-color: #f0f0f0;
        /*border: thin red solid;*/
        height: 500px;
        overflow:hidden;


  #category_main
                width: 75%;
                height:200px;
                border: thin red solid;
                margin: 0 auto;
                margin-top: 15%;
            

<div id="modal">
    <div id="category_main"></div>
</div>

注意

在 css 中 cmets 应该在 /*.......*/ this 之间传递，而不是 //....

【参考方案4】：

将此css用于#modal，

垂直对齐：中间；

显示：表格单元格；

#modal 
  background-color: #f0f0f0;
  //border: thin red solid;
  height: 500px;
  width: 500px;
  vertical-align: middle;
  display: table-cell;

#category_main 
  width: 75%;
  height: 200px;
  border: thin red solid;
  display: block;
  margin: 0 auto;
  margin-top: 5%;

<div id="modal">
  <div id="category_main"></div>
</div>

【参考方案5】：

真的，如果你不想要你想要的空白，只需将 padding:5% 添加到主 div..也许这会解决你的问题

#modal 
  background-color: #f0f0f0;
  //border: thin red solid;
  height: 500px;
  padding: 5%;

#category_main 
  width: 75%;
  height: 200px;
  border: thin red solid;
  display: block;
  margin: 0 auto;
 

<div id="modal">
  <div id="category_main"></div>
</div>

#modal 
  background-color: #f0f0f0;
  //border: thin red solid;
  height: 500px;
  padding:5%;

#category_main 
  width: 75%;
  height: 200px;
  border: thin red solid;
  display: block;
  margin: 0 auto;

<div id="modal">
  <div id="category_main"></div>
</div>