如何消除div右侧的空白？

Question

如何消除div右侧的空白？

htmlcss

3

正在发生什么

我的需求

正如您所见，尽管我设置了body {padding: 0; margin: 0;}，但是#Demo-Card右侧仍存在这个令人讨厌的白色空间。

我也尝试过：

#Demo-Card {
    padding: 0;
    margin: 0;
}

但是那个方法并没有起作用。

我该如何摆脱这个讨厌的空白间隙呢？

如果有人能帮忙解决这个问题，将非常感激！

代码

HTML

<body>
<div id="Demo-Card">
    <header>
        <h3><span class="problem-number">11</span> <span class="problem-equation">Problem</span></h3> 
    </header>
    <!--<button id="Run">Run Demo</button>-->
    <div class="iframe-container">
        <iframe id="Demo-iFrame" src="mathsynthesis/LearningByExample/GUI/web/mathsynth.html">
            <p>Your browswer does not support iFrames</p>
        </iframe>
    </div>
</div>
</body>

CSS

body{
    padding: 0;
    margin: 0;
    font-family: 'Work Sans', sans-serif;
}

/*DEMO-CARD FORMATTING*/
#Demo-Card {
    width: calc(100vw - 40px);
    height: calc(100vh - 40px - 50px); /*40px for borders, 50px for menu*/
    background-color: white;
    border: 20px solid #86E1D8;
}

JSFiddle

- 14wml

是的，答案是正确的。将宽度设置为100vw或100％有效，我不知道为什么我认为边框应用于宽度...昨天回答你的问题时我有点糊涂。抱歉哈哈。 - zsawaf

@zsawaf 没关系！你的回答非常有帮助，我很感激！ - 14wml

2个回答

1

不要从#Demo-Card的宽度中减去40px。这40px是创建该间隙的原因。

#Demo-Card {
    width: 100vw;
    height: calc(100vh - 40px - 50px); /*40px for borders, 50px for menu*/
    background-color: white;
    border: 20px solid #86E1D8;
}

- nicael

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Toby · Accepted Answer

在ID为“Demo-Card”的div上，您有这个CSS设置：

宽度：calc（100vw-40px）;

这相当于浏览器窗口的总宽度减去40像素。

相反，将其设置为：

宽度：100％;

它应该可以工作了。