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

发布时间：2020-12-14 19:40:42 所属栏目：资源来源：网络整理

导读：我有这样的 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

我有这样的 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!