css - 全高 div : make faux column have a fixed width

标签 css html

我有这样的布局:

<div class='foo'>
    <div class='bar'>
        <div class='baz'>
            Content stuff...<br/>
            Content stuff...<br/>
            Content stuff...<br/>
            Content stuff...<br/>
        </div>
    </div>
</div>

像这样使用 CSS:

.foo{
    position:absolute;
    left:20px;
    top:20px;
}
.bar{
    width:0px;
    border-left:1px solid blue;
    border-right:1px solid yellow;
}
.baz{
    padding-left:35px;
    padding-right:27px;
}

... 一种获得全高列的非常标准的方法。但我还需要 bar 为固定宽度(在本例中为 0px)。有什么方法可以让内容 div baz 保持原来的宽度(当 bar 有自动宽度时),并且仍然保持 bar全高?

最佳答案

单独使用CSS,我不这么认为;至少我想不到。

为什么不在CSS中将宽度设置为auto,使用jQuery你可以将宽度设置为一个变量,然后你可以将宽度设置为0px...

这样你就有了一个可以设置 .baz 的变量。

我说得有道理吗?

关于css - 全高 div : make faux column have a fixed width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4337017/

相关文章:

javascript - 如何组合元素变换?

html - 为什么我不能用我的 table 继承 parent 的宽度?

html - 在两个自动调整的 div 之间居中对齐一个固定宽度的 div

CSS 转换(旋转)文本在 Chrome 和 Firefox (Windows) 中看起来没有消除锯齿

css - 是否有连续 sibling 的CSS选择器

responsive-design - 带有子显示的子内联 block 的 CSS div 没有保持高度

html - 当仅屏幕高度发生变化时,如何防止绝对居中放置的模态触摸浏览器顶部

html - 嵌套的 flexbox 包装在 IE11 和 Safari 中不起作用

javascript - 将数据插入表中并像表单一样提交

JQuery - .position 不返回相对于父级的偏移量