如何摆脱div右侧的空白区域?

时间:2016-07-21 20:39:08

标签: html css

发生了什么

enter image description here

我想要什么

正如您所看到的,即使我设置#Demo-Cardbody{padding: 0; margin: 0;}右侧也会出现这个讨厌的空白区域。

我也尝试过:

#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

2 个答案:

答案 0 :(得分:6)

在ID为Demo-Card的div上,您设置了此CSS:

width: calc(100vw - 40px);

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

相反,请将其设置为:

width: 100%;

它应该有用。

答案 1 :(得分: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;
}