css - 使用 Chris Coyier 全 Angular hack 没有高度

标签 css height width

我在我正在构建的网站上使用 Chris Coyier 的全宽 hack,但对如何让 div 具有它包含的任何内容的高度感到困惑。

通常我会通过将 overflow:auto 添加到容器中来实现这一点,但如果我这样做,它会破坏 hack。是否有可能达到一个高度并仍然使用这个 hack?

你可以在这里看到我的问题:http://beta.revival.tv/

这是我的 CSS:

#content-wrap:before, #content-wrap:after {content: ""; position: absolute; top: 0; bottom: 0; width: 9999px;}

#content-wrap:before {right: 100%;}

#content-wrap:after {left: 100%;}

#content-wrap, #content-wrap:before, #content-wrap:after {background:#666;}

#content-wrap {
position: relative;
width:1000px;
margin:0 auto;
padding:25px 0;
}

最佳答案

您可以添加另一个 div 以包含 #content-wrap div 中的内容,然后应用 overflow: auto;和宽度:100%;对它

<div id="content-wrap">
    <div id="content"></div>
</div>

#content { 
    overflow: auto;
    width: 100%;
}

我不知道你的 html,但如果问题是由 div 内部的 float 元素引起的,你可能还想尝试使用 display: inline-block;相反

关于css - 使用 Chris Coyier 全 Angular hack 没有高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11425002/

相关文章:

css - 如何在 Bootstrap-Vue 中增加工具提示的宽度

html - CSS 百分比宽度不起作用

jquery - 在 jQuery toggle 中我想改变按钮的形状

css - z-index 不适用于固定定位

css - 100% div 高度让人头疼

css - 让 Monaco Editor 填充页面的其余部分(跨浏览器)

html - CSS居中全宽横幅图像没有滚动条

css - Bootstrap 3 导航栏与表(带滚动条)重叠

jquery - Bootstrap3 Accordion 表不适用于 IOS 移动设备

html - 需要轮播是 100% 绝对位置