Question

这是html＆amp; css问题我试图solve：

HTML＆amp; CSS：

＆＃13;

#fixedLeftMenu {   
    display: inline-block;
    height: 50px;
    background-color: yellow;
    width: 25px;
    position: fixed;    
}

#container {  
    display: inline-block;
    background-color: orange;
    width: calc(100% - 25px);
    margin-left: 25px;
}

#redFixedDiv {
    height: 100px;
    background-color: red;  
    width: 25%;
    position: fixed;                       
}
#blueDiv {
    float: right;
    height: 1000px;
    background-color: blue;   
    width: calc(100% - 25%);
}

＆＃13;

<div id="fixedLeftMenu"></div>
<div id="container">
    <div id="redFixedDiv">
    </div>
    <div id="blueDiv"></div>
</div>

＆＃13;

黄色div 是一个固定的 div，其中包含固定的宽度。
红色div 是固定的 div但％宽度。
蓝色％宽度;

您可以看到红色和蓝色div不匹配100％宽度（橙色div容器）作为例外。红色的div正在超越蓝色。

如果我移除红色的固定位置，一切都会好的，但我确实希望它被修复。它可能是复杂的HTML，但我真的想解决它。可能吗？我在这里失踪导致html / css行为？

Answer 1

以下是您问题的fix。

<input name="ctl00$conMain$CheckoutControl1$txtCreditCardNumber" type="text" id="ctl00_conMain_CheckoutControl1_txtCreditCardNumber" title="Credit Card Number " x-autocompletetype="cc-number">

这不是#fixedLeftMenu { display:inline-block;height: 50px;background-color:yellow; width: 25px; position: fixed; } #container { display:inline-block; background-color:orange; width: 100%; margin-left: 25px; } #redFixedDiv { height: 100px; background-color: red; width: 25%; position: fixed; } #blueDiv { float:right;height: 1000px;background-color: blue; width: 75%; }的问题。只需避免position:fixed功能。这也像计算（100％ - 25px）。我不确定浏览器的计算方式，但我觉得你的代码不应该依赖它。开发人员/设计人员应手动设计所有组件的宽度/高度/位置，以便一切正常。

Answer 2

由于具有固定位置的元素在给定百分比宽度时不会查看其父级宽度，因此您需要调整calc中的宽度，以便它占25px余量。我对以下代码所做的是先获取pagewidth - 25px，然后将其除以4得到25％

#redFixedDiv{
    height: 100px; background-color: red;  
    width: calc((100% - 25px) / 4);
    position: fixed;                       
}

混合几个位置：固定Div

2 个答案: