正如您所看到的,即使我设置#Demo-Card
,body{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;
}
答案 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;
}