gpt4 book ai didi

html - 隐藏相对位置和溢出的容器没有高度

转载 作者:行者123 更新时间:2023-11-28 13:02:29 25 4
gpt4 key购买 nike

我有以下 CSS 片段,我希望导航和网站在其中绝对定位,这样我可以在按下菜单按钮时来回滑动它们(例如 facebook 应用程序)。为此,我有一个带有 overflow: hidden 的容器(用于隐藏导航栏并在需要时将其滑入)。然而;恐怕由于绝对定位,容器失去了它的自动高度。

我怎样才能再次自动设置高度,因为 overflow: hidden 没有绝对定位。

我创建了一个 fiddle ,其中容器的高度为 500 像素。不过,我想自动制作高度比例。 http://jsfiddle.net/rB7EY/

div {
box-sizing: border-box;
}


.container {
overflow: hidden;
width: 100%;
max-width: 60em;
padding: 0;
margin: 0 auto;
position: relative;
background: grey;
height: 500px;
}

/*CSS for the navigation bar that can be toggled*/
.navigation {
width: 15em;
float: left;
background: blue;
position: absolute;
left: -20px;
}

/*The CSS for the actual content*/
.website {
width: 100%;
float: left;
position: absolute;
left: 0px;
}

.container .website .top_bar {
height: 4em;
background: pink;
padding: 1em;
position: relative;
}

.container .website .top_bar .menu_button {
width: 3.2em;
height: 2.5em;
background: red;
border: 0px;
}


nav.menu {
width: 15em;
position: absolute;
left: 1em;
top: 3em;
background: yellow;
}

最佳答案

如果我理解得很好,你是否想要自动扩展容器?尝试使用最小高度和最大高度

关于html - 隐藏相对位置和溢出的容器没有高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16083068/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com