html – 固定元素的百分比宽度?

前端之家收集整理的这篇文章主要介绍了html – 固定元素的百分比宽度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这样的 HTML
<div id='content'>
    <div id='first'>...</div>
    <div id='second'>...</div>
</div>

#content
{
    width:100%;
    position:relative;
    padding:20px;
}

#first
{
    width:70%;
    position:relative;
}

#second
{
    width:70%;
    position:fixed;
}

这使得第二个div比第一个div更宽(40像素),因为第一个div的70%是相对于内容的宽度(这是100%减去每边20px的填充).

第二个div的70%是什么意思?我如何做到这样两个div是相同的宽度?

解决方法

第一个div的70%是指#content的宽度的70%.

第二个div的70%是视口宽度的70%.

如果你添加这个CSS,两个div的宽度是相同的:

html,body {
    margin:0; padding:0
}

Live Demo

原文链接:https://www.f2er.com/html/223995.html

猜你在找的HTML相关文章