子 div 100% 高度到父自动高度

2024-03-23

我来这里是因为其他类似的问题无法解决我的特定问题。

I need right div始终为 100% 高度,其中parent高度取决于left div高度取决于里面的内容。

这是 HTML:

<div class="container clearfix">
<div class="left"></div>
<div class="right"></div>
</div>

​这是 CSS:

.container{
    min-height: 10px;
    width: auto;
    height: auto;
    background-color: #eeeeee;
}

.left{
    position: relative;
    float: left;
    min-height: 100px;
    width: 50px;
    background-color: #dddddd;
}

.right{   
    min-height: 20px;
    position: relative;
    float: left;
    height: 100%;
    width: 50px;
    background-color: #dddddd;
}

.

.clearfix:after
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}

​Note:
我在用着clearfix.
如果你可以在中显示你的答案jsfiddle

这是 jsFiddlehttp://jsfiddle.net/C9Kmx/32/ http://jsfiddle.net/C9Kmx/32/


制作正确的 divposition:absolute;并制作父divposition:relative;进而height:100%;将为正确的 div 工作。确保您还相应地调整其 x 位置和宽度。在这个例子中我给了它一个left:50px以确保它出现在左栏的右侧。

JSFiddle http://jsfiddle.net/e9mvD/ http://jsfiddle.net/e9mvD/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

子 div 100% 高度到父自动高度 的相关文章

  • 用 Beautiful Soup 进行抓取:为什么 get_text 方法不返回该元素的文本?

    最近我一直在用 python 开发一个项目 其中涉及抓取一些网站的一些代理 我遇到的问题是 当我尝试抓取某个知名代理站点时 当我要求 Beautiful Soup 查找 IP 在代理表中的位置时 它并没有按照我的预期执行操作 我将尝试查找每
  • SELECT 元素中的图像[重复]

    这个问题在这里已经有答案了 我知道如何使用 CSS 背景图像属性让图片显示在 HTML 下拉表单元素中的选项旁边 但是 图像不会显示在所选元素上 有什么方法可以做到这一点 最好只使用CSS EDIT 这是列表元素的工作代码的示例 但是 当下
  • :target 伪类在 Firefox 中无法正常工作

    我正在使用 target 伪类制作一个具有 CSS 灯箱类型效果的页面 当您单击图像时 会弹出一个包含信息的框 当您单击任意位置时 该框会再次消失 它在 Chrome 和 IE 中运行良好 但在 Firefox 中存在一个奇怪的错误当您将鼠
  • 横向旋转到纵向时的字体大小怪异 - CSS 媒体查询 - iPhone5 Safari

    我已经用谷歌搜索了这个 但无法弄清楚 谢谢你的帮助 Studiolynch com 响应式和流体布局 在 iphone 5 Safari 中完美运行 除了从横向模式旋转到纵向模式会使字体大小小于应有的大小 但是 如果您最初以纵向模式加载页面
  • 用于创建动画渐变按钮背景的 CSS

    我正在寻找一个CSS规则可以创建一个CSS动画按钮的彩色渐变背景 https i stack imgur com NHqf8 gif 我只是想玩它并这样做 https codepen io prashant nadsoftdev pen b
  • JavaFX 中的 -fx-background-radius 和 -fx-background-insets

    我正在使用 JavaFX 我想自定义一个按钮 我看到了几个可以设计的特征 其中我发现了两个我不认识的人 button fx padding 5 22 5 22 fx border color 121212 fx border width 2
  • 扩展引导程序预输入的宽度以匹配输入字段

    我知道这个问题之前至少被问过三次 但我看到的答案并不是我想要的 我希望增加 twitter bootstrap 通过其 typeahead 功能生成的自动完成字段的宽度 我一直在读到它延伸到覆盖该字段中的所有文本 也就是说 文本越长 自动完
  • onclick 函数上的 CSS 选择器

    有没有办法让CSS选择器onclick function 您可以在onclick https stackoverflow com questions 24365416 select element which have specific a
  • 编辑角度材质的表格单元格填充

    当我使用开发人员工具检查该元素时 它显示零填充 但是当我查看它并将鼠标悬停在它上面时 它非常清楚地在单元格内具有填充 我不知道这是从哪里来的 并且设置td padding 0 important 什么也没做 感知到的填充是由以下原因引起的d
  • HTML代码可以像CSS文件一样附加到HTML页面吗?

    HTML 代码可以像 CSS 文件一样附加到 HTML 页面吗 这样 如果所有页面中都复制了部分 HTML 代码 我可以将其放在一个文件中 然后轻松修改它 谢谢 Ahmed 是的 可以 使用框架 但不推荐 Example 此代码将允许您重用
  • Chrome 中的错误或 CSS 错误? (隐藏可见性的锚点)

    在任何 HTML 中测试这个简单的行 a href anything span insible text here span a 您可以直接从这里测试 http jsfiddle net wqS3E http jsfiddle net wq
  • 从 PHP 生成渐变颜色

    我想知道如何构建一个给出颜色代码和 显示该颜色的渐变 例如 function generate color int colorindex Generate 10 pale colors of this color 请帮我 迈克尔引用的代码相
  • Disqus 评论数始终为 0 条评论

    我想我已经按照通用代码的说明设置了 Disqus 问题是它总是说某个帖子有 0 条评论 拿这个帖子来说 http tx0rx0 com retropie and the raspberry pi http tx0rx0 com retrop
  • 数据表“footerCallback”函数未在页脚中显示结果

    我尝试获取每列的总和并将结果显示在页脚中 我在用着 页脚回调 https datatables net reference option footerCallbackDatatables提供的功能 但是它在页脚中没有显示任何内容 数据表解释
  • 在 jQuery 中获取 CSS 规则的百分比值

    假设规则如下 largeField width 65 有没有办法以某种方式恢复 65 而不是像素值 Thanks EDIT 不幸的是 在我的例子中使用 DOM 方法是不可靠的 因为我有一个导入其他样式表的样式表 因此cssRules参数以以
  • CSS:如何在模糊的背景上剪切文本?

    我想重新创建以下样式 我想出了以下内容 问题是剪切不会影响模糊滤镜 我不知道如何解决它 这是我的 HTML 代码 glass width 40 height 100 position absolute background rgba 255
  • 带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误

    Safari 和 Chrome 以及 Opera 和 Firefox 都可以处理 hover伪类和相邻兄弟选择器 a hover div 这有效 但是 当添加另一个相邻兄弟时 div hover a div Webkit 崩溃了 但是 如果
  • MVC4 捆绑:由于 css3 功能而缩小失败?

    我想使用 MVC4 捆绑和缩小 但我总是在未缩小的 css 文件中收到此错误消息作为注释 Minification failed Returning unminified contents 534 29 run time error CSS
  • 简单的颜色变化

    我正在创建一个用户界面 用户可以在其中更改页面的颜色值 我想要的是获取分配给其背景颜色的值并将其变亮一定程度 我只是想获得一条亮点线 而不必每次都制作新图像 示例 用户将背景颜色设置为 ECECEC 现在我希望某个元素边框变成 F4F4F4
  • 文本溢出:省略号显示不同的字符

    我这里遇到了一些 CSS 问题 看这张图片 https www flickr com photos 125543025 N07 saved 1 在此图像中 我为文本 INTENSE TRAINING 添加了 CSS 样式 sample st

随机推荐