HTML Question
Why does this CSS add a scrollbar to my page and remove all the page's content?
I created a page with a simple form then added some very basic styling to level things out and it appears to have removed the page content and added a scroll bar.
html {
font-size:1em;
}
body {
background-color: #CCFFCC;
padding: 0;
max-width: 100%;
margin: 100%;
}
header {
padding: 0;
max-width: 100%;
margin: 100%;
}
nav {
padding: 0;
max-width: 100%;
margin: 100%;
}
nav li {
padding: 0;
max-width: 100%;
margin: 100%;
}
https://jsfiddle.net/rz9Lv837/
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
Your issue is that you have included margins on the body, header and nav, this is expanding the content out, You could simply fix this by setting the margin to 0 or just removing all instances of margin:100%;
html {
font-size:1em;
}
body {
background-color: #CCFFCC;
padding: 0;
max-width: 100%;
}
header {
padding: 0;
max-width: 100%;
}
nav {
padding: 0;
max-width: 100%;
}
nav li {
padding: 0;
max-width: 100%;
}
Demo: jsfiddle
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download