设置“位置:固定"的宽度div 相对于父 div

Set width of a quot;Position: fixedquot; div relative to parent div(设置“位置:固定的宽度div 相对于父 div)
本文介绍了设置“位置:固定"的宽度div 相对于父 div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试为 div(位置:固定)提供 100% 的宽度(与其父 div 相关).但是我有一些问题......

I'm trying to give a div (position: fixed) the width of 100% (relating to it's parent div). But I've got some problems...

第一个问题是用inherit解决的,但还是不行.我认为问题在于我正在使用多个 div 占用 100%/继承宽度.您可以在 jsfiddle 更新中找到第二个问题:http://jsfiddle.net/4bGqF/7/

狐狸示例

#container {
    width: 800px;
}

#fixed {
    position: fixed;
    width: 100%;
}

和html

<div id="container">
    <div id="fixed">Sitename</div>
    <p>
        blaat
    </p>
</div>

或者你可以试试:http://jsfiddle.net/4bGqF/

问题似乎是固定元素总是占用窗口/文档的宽度.有谁知道如何解决这个问题?

The problems seems to be that the fixed element is always taking the width of the window/document. Does anyone know how the fix this?

我不能给我的固定元素一个固定的,因为我正在使用 jScrollPane 插件.是否有滚动条取决于内容.

I can't give my fixed element a fixed with, because I'm using the jScrollPane plugin. It depends on the content whether there's a scrollbar or not.

非常感谢!

PS:2 个 div 的文本相互重叠.这只是一个例子,所以并不重要.

PS: The text of the 2 divs are on top of each other. This is just an example so that doesn't really matter.

推荐答案

我不确定第二个问题是什么(基于您的编辑),但如果您应用 width:inherit对于所有内部 div,它都有效:http://jsfiddle.net/4bGqF/9/

I´m not sure as to what the second problem is (based on your edit), but if you apply width:inherit to all inner divs, it works: http://jsfiddle.net/4bGqF/9/

您可能想为需要支持但不支持 width:inherit

You might want to look into a javascript solution for browsers that you need to support and that don´t support width:inherit

这篇关于设置“位置:固定"的宽度div 相对于父 div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print,而忽略其余内容)
How to trim() white spaces from a string?(如何从字符串中去掉()空格?)
price depend on selection of radio input(价格取决于无线电输入的选择)
calculate price depend on selection without button(根据没有按钮的选择计算价格)
How to minify json response?(如何缩小JSON反应?)
Minify CSS with Node-sass(使用Node-Sass缩小CSS)