CSS 高度自动不工作

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9181748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:51:27  来源:igfitidea点击:

Height auto is not working

css

提问by ismail vittal

 #container
 {
background: #787234;
width:980px;
height:auto;
margin-left: auto;
margin-right: auto;
position:relative;
//float:left;
}

Container height is set to auto still I am facing height issue. since the DIV is aligned to center I am not able to use float:left.

容器高度设置为自动我仍然面临高度问题。由于 DIV 与中心对齐,因此我无法使用 float:left。

Please tell me how to get the height:auto without using float:left

请告诉我如何在不使用 float:left 的情况下获得 height:auto

http://jsfiddle.net/Bhy3q/

http://jsfiddle.net/Bhy3q/


Edit:


编辑:

float:left is giving me the result but my div wont be in center if I use float:left

float:left 给我结果,但如果我使用 float:left,我的 div 不会在中心



Solved: (Not having 100 Reputation to Answer this )



已解决:(没有 100 声望来回答此问题)

Since the #container is aligned to center, its giving me height:auto issue. I solved by creating a sub-container div having float:left

由于 #container 与中心对齐,它给了我 height:auto 问题。我通过创建一个具有 float:left 的子容器 div 来解决

Hence, float:left is the answer which I cannot use in #container

因此, float:left 是我不能在 #container 中使用的答案

#container
{
width:980px;
margin-left: auto;
margin-right: auto;
}

#sub-container
{
width:100%;
height:auto;
float:left;
background: #FFF;
}

回答by Karol

Hi guys I have the same problem and I found a solution:

大家好,我遇到了同样的问题,我找到了解决方案:

div#container {
    height: auto;
    overflow: hidden;
}

I got many div's in the container, but it won't work without overflow:hidden;.

我在容器中有很多 div,但没有overflow:hidden;.

When I put it in the above code it works very well ;)

当我把它放在上面的代码中时,它工作得很好;)

回答by Matt K

You do not seem to understand what your CSS is doing. You are aligning the div to the center using margin-leftand margin-right, then you also want to floatit to the left. These two styles are in conflict and will not work. Either you want the div in the middle, or on the left, it can't be both at the same time.

你似乎不明白你的 CSS 在做什么。您使用margin-leftand将 div 与中心对齐margin-right,然后您还希望将float其向左对齐。这两种风格是冲突的,不会起作用。要么你想要 div 在中间,要么在左边,它不能同时存在。

Also, the heightis set to autoby default so you shouldn't have to explicitly state this.

此外,默认情况下height设置为auto,因此您不必明确说明这一点。

回答by Gordolio

I had a similar issue. The div I was working with had a calculated height that was the size of the window (768px). I had height:auto;set and the combined height of the child elements was 80px.

我有一个类似的问题。我正在使用的 div 计算出的高度是窗口的大小 (768px)。我已经height:auto;设置并且子元素的组合高度是 80px。

The reason why was because I had this in my css

原因是因为我的 css 中有这个

div.my-div {
  top:0px;
  bottom:0px;
  height:auto;
  position:fixed;
}

The top:0px;and the bottom:0px;caused the calculated height to be the size of the window. I removed the bottom:0px;and everything was right again.

所述top:0px;bottom:0px;造成所计算出的高度是窗口的大小。我删除了bottom:0px;,一切又正确了。