html - div.fixed 100% 宽度只用 css

标签 html css

如何将 div.fixed 固定在其父 .content 宽度的 100%? ...知道所有宽度都是可变的,甚至是 .content

或多或少我需要的是 .content with position: relative; div.fixed position:absolute;和宽度:100%;但如果我有垂直滚动条,则固定在顶部

如果可能,不使用 JavaScript,只使用 CSS。

我尝试了几种方法,但都没有用,谢谢你的时间和帮助

.sidebar {
        float: left;
        background-color: red;
        padding: 20px;
        color: #fff;
    }
    .content {
        float: left;
        width: 40%;
        padding: 20px;
        background-color: #d5d2ca;
        min-height: 900px;
        box-sizing: border-box;
        position: relative;
    }
    .fixed {
        background-color: #aaffaa;
        padding: 20px;
        position: absolute;
        box-sizing: border-box;
        width: calc(100% - 40px);

    }
    .content p {
        margin-top: 100px;
    }
<div style="width: 90%; margin: 0 auto;">
<div class="sidebar">
    the sidebar is going to have variable width
</div>
<div class="content">
    <div class="fixed">
        Fixed
    </div>
    <p>content</p>
</div>
</div>

最佳答案

100% 的内容?那将是

width:calc(40% - 40px);

关于html - div.fixed 100% 宽度只用 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45891631/

相关文章:

jquery - 悬停使用 jQuery 更改不相关元素的样式

javascript - 相对定位元素原始位置的点击事件

html - CSS 中的粘性 div

javascript - jQuery:在克隆元素上使用 .css 来获取特定的 css 属性?

javascript - 如果检测到移动用户,如何缩小表格文本?

javascript - ScrollIntoView() 导致整个页面移动

html - 带有渐变边框的 CSS 按钮

javascript - 如何使字体很棒的插入符号从插入符号右变为插入符号向下?

html - 使用 CSS 防止级联

javascript - 如果隐藏所有子 Div,如何隐藏父 DIV(显示 :none)