html - 使 div 拉伸(stretch)到内容的高度,而不是页面的高度

标签 html css

我有一个高度为 100% 的 div:

height: 100%;

另外我添加了一个绝对位置:

position: absolute;

当我添加绝对位置属性时,div 会拉伸(stretch)到页面的高度,而不是像以前那样拉伸(stretch)到页面内部内容的高度。我怎样才能使 div 延伸到内容的高度,而不是页面的高度?

如果有帮助的话,这里是完整的代码:

.blah {
    height: 100%;
    width: 200px;
    position: absolute; 
    border-radius: 15px 15px 15px 15px; 
    -moz-border-radius: 15px 15px 15px 15px; 
    -webkit-border-radius: 15px 15px 15px 15px; 
    border: 0px solid .800000;
    padding: 0.5em;
    background-color: #ffffff;
    -webkit-box-shadow:  1px 1px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow:  1px 1px 1px 1px rgba(0, 0, 0, 0.3);
}

最佳答案

只是不要使用 height:100% 高度会自动调整到内容。

您描述的行为源于这样一个事实:一旦您分配了 position:absolute;,父元素(根据其确定 100%)将成为 body 元素(假设您没有放置该 DIV 的其他父元素)。

关于html - 使 div 拉伸(stretch)到内容的高度,而不是页面的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13981263/

相关文章:

javascript - 为什么将单独的 "paste"事件监听器都粘贴到同一个 <div>?

javascript - Jquery动态添加字段,如果删除最后一个元素,则不再添加字段

javascript - 在 Chrome 扩展中注入(inject) Jquery 对话框

html - 如何在 CSS 中将绝对定位的元素居中

html - 如何添加带有动画的类?

javascript - 如何在 javascript 中更改 "html"本身的 CSS 属性?

html - 你如何在div的左侧添加图像

css - 偏移 div,同时使用 960

css - 第一个和最后一个 <li> 元素的圆 Angular

php - 如何在单击按钮时更改表单输入标签的 CSS 属性(边框颜色)并提交数据?