How to get rid of white space on right of div?
Question
What is happening
What I want
As you can see, there is this pesky white space on the right side of #Demo-Card even though I set the body{padding: 0; margin: 0;} body{padding: 0; margin: 0;} .
I also tried:
#Demo-Card {
padding: 0;
margin: 0;
}
But that didn't work.
How do I get rid of this pesky white space?
If anyone could help w/ this it would be greatly appreciated!
Code
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;
}
2 answers
solution1
6 ACCPTED 2016-07-21 20:40:46
On the div with the id Demo-Card you have this CSS set:
width: calc(100vw - 40px);
Which is equivalent to the total width of the browser window, minus 40px.
Instead, set this to:
width: 100%;
And it should work.
solution2
1 2016-07-21 20:41:19
Just don't subtract 40px from the width of the #Demo-Card . Those 40px are creating that gap.
#Demo-Card {
width: 100vw;
height: calc(100vh - 40px - 50px); /*40px for borders, 50px for menu*/
background-color: white;
border: 20px solid #86E1D8;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.