What's the best approach to creating a div that will take the full width of the screen, no matter what resolution? I'm trying to add a 'top' bar and bottom 'footer' area with divs that have a black background and styled border that I'd create with a small image and repeat. For some reason my attempts are leading to small spaces on the top and sides of the div?
My markup is similar to:
<div id="top">
Top bar stuff
</div>
<div id="pagewrap">
All the page content
</div>
CSS
#top {
width: 100%;
margin: 0;
padding: 0;
background-color:#000
Usually this is the body tag having some paddings and/or margins. Try adding:
body {
padding: 0;
margin: 0;
}
If this works, you may want to consider using a normalization stylesheet that fixes this type of issue as well as many other related types of issues.
Extended answer...
The above answers the core issue folks landing here seem to have. But to expand a bit, try to directly answer the original question, and also providing some staple code that I use for things nowaydays:
Here's how I would create a full-width, but also full-height div inside a body in a cross-browser (but modern browser only) way:
document.getElementById("pagewrap").innerHTML = "All the page content<br>".repeat(100);
* {
box-sizing: border-box; /* not completely needed, yet useful */
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: flex; /* or css grid for more intricate layouts */
flex-direction: column;
}
#top {
background-color: LightCoral;
height: 150px;
border-bottom: 3px solid Crimson;
}
#pagewrap {
background-color: LightGreen;
flex-grow: 1; /* make it stretch to the bottom even if little content */
overflow-y: scroll; /* optional */
}
<div id="top">Top bar stuff</div>
<div id="pagewrap">All the page content</div>
Just use top:0; and left: 0; and you can also eliminate padding: 0. Don't use top: 0; for other div except top, use left: 0; for other div for eliminate the left space.
#top {
width: 100%;
margin: 0;
padding: 0;
background-color:#000
top: 0;
left: 0;
}
Ensure that body has padding and margin set to 0 in CSS.
Related
I wanted to have a full width background with my bottom div without changing the page layout structure. The following code allowed me to have a full background color (dark purple) just as I wanted it here. But when I checked the page on my phone, I saw that the bottom went up to 9999px. If I put overflow: hidden, then I dont get the full width background. Please help, thank you!!
.nextpage {
color: #FFF;
background: #2D0072;
width: 100%;
height: 120px;
text-align: center;
padding: 33px 5px;
display: block;
position: relative;
}
.nextpage:before, .nextpage:after {
content: "";
position: absolute;
background-color: #2D0072;
top: 0;
bottom: 0;
width: 9999px;
}
.nextpage:before {
right: 100%;
}
.nextpage:after {
left: 100%;
}
Of course, the best way to tackle this would be to arrange your layout HTML...
<body>
<header>
<div class="page-width">
// header stuff here
</div>
</header>
<content>
<div class="page-width">
// main content stuff here
</div>
</content>
<footer>
<div class="page-width">
// footer stuff here
</div>
</footer>
</body>
Then the CSS...
body {
display: flex;
}
content {
flex: 1;
}
.page-width {
margin: 0 auto; // centers your block element if smaller that it's parent
max-width: 1200px; // you decide
}
But you can't alter your layout?? You will have to do some hackery...
CSS
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
stuff-in-footer {
margin: 0 auto; // for centering
max-width: 1200px; // you decide
}
The hackery needed is to put a bottom margin on the rest of your page so you can see it when fully scrolled. Also, 'fixed' will position the footer on the bottom of the page, as the CSS is written above, no matter the scroll position of your page. Some JS might be needed to apply the right bottom margin on your content based on the display height of your footer, and more to reveal the footer when the page is fully scrolled.
Check your media queries. Loading the page in a desktop browser and scaling the width of the window down vs loading the page on mobile on BrowserStack generates very different results.
Update: the page URL is https://nuclearterrortoday.org/test/pledge.php - if you inspect on mobile, you'll notice the navbar doesn't take the full width of the page, though inspector says the width is 100vw
Stylesheets (in cascading order - some elements may be overridden in forms.css):
https://nuclearterrortoday.org/test/style.css
https://nuclearterrortoday.org/test/forms.css
I have a website with a nav bar that's standard across the site. On one page, the nav bar only covers approximately 90% of the width of the screen, leaving a gap on the right side. There's an additional stylesheet styling the affected page, but nothing affecting any nav elements or the page itself (ie changing the body's width). Resetting HTML, body, topnav, and .pledge-bg (custom body class) has no effect.
That said when using js to change the display of a child element of .topnav for the mobile menu, the width of .topnav changes to the width of the screen as intended.
On every other page, .topnav takes 100% of the screen width. The HTML structure where the header is included is identical.
CSS:
/*left:0 and right: 0 per #Magnus Eriksson*/
var myLinks = document.getElementById("myLinks");
if (myLinks.style.display !== "block") {
myLinks.style.display = "block";
} else if (myLinks.style.display == "block") {
myLinks.style.display = "none";
}
html {
left: 0;
right: 0;
width: 100%;
width: 100vw;
}
body {
left: 0;
right: 0;
width: 100%;
width: 100vw;
}
.topnav {
left: 0;
right: 0;
position: fixed;
top: 0;
width: 100%;
width: 100vw;
height: 10%;
height: 10vh;
background-color: rgba(169, 169, 169, 0.75);
color: white;
font-size: 5rem;
padding-bottom: 0;
margin-bottom: 0;
overflow: hidden;
}
#topnav {
left: 0;
right: 0;
width: 100%;
width: 100vw;
}
.topnav #myLinks {
left: 0;
right: 0;
z-index: 999;
display: none;
height: 100%;
height: 100vh;
width: 100%;
width: 100vw;
z-index: 11;
background-color: rgba(148, 181, 201, 0.9);
color: white;
}
.pledge-bg {
left: 0;
right: 0;
background: url(img/ocean-nuke.jpg) no-repeat center center fixed;
background-color: rgba(0, 0, 0, 0.5);
z-index: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
width: 100vw;
}
<script src="https://nuclearterrortoday.org/test/swap.js"></script>
<body>
<!-- <?php include "../../inc/header.php" ?>
-->
<!-- Top Navigation Menu (header.php:)-->
<div class="topnav" id="topnav">
<div id="myLinks">
menu
</div>
</div>
<div class="main">
<div class="main-header">
<h1 id="vision">Miracles Have Been Created in The Past</h1>
<p id="main1">10/10/1963 - We no longer test nukes in the ocean or atmosphere!</p>
<img onclick="animateSlide('left')" class="control" id="lControl" src="img/leftArrow.png">
<img onclick="animateSlide('right') " class="control" id="rControl" src="img/rightArrow.png">
</div>
</div>
</body>
Instead of using width: 100vw on #topnav just use width: 100%. Also if you define two values for one property the last one will override the first one so don't do that.
Remove width: 100vw and width: 100% from .topnav as id topnav already got the precedence over class topnav so width applied on .topnav will never apply.
Also, remove all the styling from the body. left and right will not work on body tag as it's position is static. Also, body by default take 100% width you just need to remove default margin which browser applies on the body tag:
body {
margin: 0;
}
Also, remove all the styling from HTML tag reason is same I mentioned for body tag above.
The right arrow for your image slideshow is causing the position of your nav menu to be thrown out. The right arrow is currently coded to display at -5% on an iphone screen) and it is the css includes position:absolute. There is currently no media query to handle resize for devices under iPad size, so on mobile phones, the main div, containing the slideshow + arrows, is impacting the nav menu; this is causing the a negative 'shift'.
The issue could most likely be resolved by moving the div containing the arrows further down on mobile devices using media queries.
Hope this helps
Actually this problem is because of the element with the class .top-bar.
Since your .topnav is having
.topnav {
position: fixed;
}
You need to give some position style to your .top-bar and that can be
.top-bar {
position: fixed;
}
OR
.top-bar {
position: absolute;
}
And then you can handle the display property for your text which I think is the Heading or Logo of the website.
Here is the screenshot of my modifications.
screenshot with the required changes
I hope this will help you with your problem.
To use width, you need to make the element block or inline-block For example:
.topnav {
display: inline-block !important;
left: 0;
right: 0;
position: fixed;
top: 0;
width: 100vw !important;
height: 10%;
height: 10vh;
background-color: rgba(169,169,169, 0.75);
color: white;
font-size: 5rem;
padding-bottom: 0;
margin-bottom: 0;
overflow: hidden;
}
You can fixed in two way first way is trick way and second way is right way.
First way,
Remove width: 100vw; from #topnav and .topnav.
Second way,
Your navbar is fine and working correctly.But your some element's
are wrong.When you use vw for width.You should careful.Your all
elements total width must be maximum 100%.I mean total width is
"width + left + right".You should check and recalculate for total width for every
width.
Solution for second way::
.main-header{
min-width: 95%;
}
.form{
width:95%;
}
On the page with the navigation bar error where there is a big gap
add some inline style with the <style> tag inside the 2 <head> tags
and try margin-top: -150px;
If it works but not enough increase the negative amount of pixels.
This is not enough information to debug this issue. The code you provided works fine in a Codepen (topnav is full width). There is some additional stylesheet or markup affecting your layout, and without that, this question cannot be answered.
The only thing I noticed is topnav does not have a left: 0; style, resulting in a small whitespace on the left side, but I am not sure if that is the issue you are referring to as it is much smaller than a 10% gap.
I want to divide the homepage into three responsive main sections horizontally: a header, a body and a footer, and then divide the body part into three responsive and equal vertical sections.
Please suggest a way to do so
Divide sections horizontally
There are many ways to do that, and by default most HTML tags are stacked horizontally of top each other, but to fix a header on top of everything and and a footer below everything, without leaving the page even when scrolling you need to use the position: fixed rule with the top, left, bottom and right values adjusted to your design's needs. In the example below we stick the div with class header to the top of the screen, by setting the top: 0, and make it span the full width by specifying the left: 0; and right: 0; properties, the same goes for the .footer but it is sticking to the bottom instead using bottom: 0;. Then we have the div with class body to contain the rest of your page, we need to give it a margin-top equal to the .header's height in order to prevent hiding content below the .header, the same goes for margin-bottom and the .footer's height.
Divide the body vertically (responsively)
This is achieved easily by giving the width of elements using percentages, so if you need to divide the .body div into three columns, each should span the third (33.33%), and that is achieved by setting the width: 33.333%. Now to show inner divs on the same line you need to set the display property to inline (or other inline values) and make sure the margin is zero because it is not counted in the width property.
Of course there are many alternatives to do that, but this is an example on how to do it:
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background: #4286f4;
text-align: center;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: black;
color: white;
text-align: center;
}
.body {
background: green;
margin: 70px 0;
padding: 0;
width: 100%;
text-align: center;
}
.body_v1, .body_v2, .body_v3 {
height: 100px;
width: 33.333%;
border: 0;
display: inline-block;
margin: 0;
float: left;
padding: 0;
text-align: center;
}
.body_v1 {
background: #42f465;
}
.body_v2 {
background: #108928;
}
.body_v3 {
background: #034210;
}
<div class="header">header</div>
<div class="body">
<div class="body_v1">a</div>
<div class="body_v2">b</div>
<div class="body_v3">c</div>
</div>
<div class="footer">footer</div>
After all, my advice is that you use a third party framework to achieve this instead of reinventing the wheel, there are many examples out there you can have a look and choose the one that more suits you.
I am trying to make a footer that spans the width of a page minus 10px on the left and right. I am trying to do this by giving the body a padding on all sides of 10px. In the code below the header works just fine, but the footer is ignoring the body padding on the right side. Why is it doing that and how can I fix it?
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0 10px;
}
#header {
height: 150px;
width: 100%;
margin: 0 auto;
background: #333;
}
#footer {
position: fixed;
bottom: 5px;
width: 100%;
background: #f63;
text-align: center;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="footer">I am the footer!</div>
</body>
</html>
your footer not ignoring body padding, look through console at that element sizes and you will see that width of your footer is 100% of window width + 10px from left padding + 10px from right padding.
you can use calc function in css: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
#footer {
width: calc(100% - 20px);
}
JSFiddle
Footer width and padding are calculated separately. You can use use box-sizing: border-box to prevent this from happening
Use this for all elements to behave this way
* {
box-sizing: border-box;
}
There is a good video by Travis Neilson on his YouTube channel DevTips, where he explains the box-modal concept.
#footer {
position: fixed;
bottom: 5px;
left: 10px;
right: 10px;
background: #f63;
text-align: center;
}
demo: http://jsbin.com/benosofo/3/
A fixed element is not fixed in relation to the body, it's fixed in relation to the window. If it would be fixed in relation to the body then it would be just as absolute positioning, and it would scroll with the body.
You can make a fixed container for the footer, so that you can use a padding on that.
HTML:
<div id="footercontainer"><div id="footer">I am the footer!</div></div>
CSS:
#footercontainer {
position: fixed;
bottom: 5px;
width: 100%;
padding: 0 10px;
}
#footer {
background: #f63;
text-align: center;
}
None of the solutions in the net worked for me. so I solved it another way. I was trying to create a modal for adding address and was testing it on the mobile mode. I wanted a fixed layer with rgba(0,0,0,0.75) to cover all the window and in the center, a white form appear for the user. the form header was hiding in the top (and unscrollable) and in the bottom, was sticking to the bottom of window which was not looking good (in some cases, some element won't work when they don't have enough space from the window borders).
so I solved the problem by putting a div after the form div in the bottom (to stick to the window bottom instead of my form) and made it transparent. so it worked! (I have to mention that I am writing react code)
this is my div:
<div className="modal-padding"/>
and this is my styling for this div:
.modal-padding {
width: 100%;
border: 10vh solid transparent;
}
I used one, before the form div and one after that.
Be careful. I tested giving a width: 100vw and height: 10vh to the div but when it has no content, it doesn't work, seems it doesn't exist at all. so I gave a border.
I hope this solve your problem too, or give you an idea for solving the issue.
Good luck.
You could make a wrapper for your footer and apply the 10px padding to that instead.
#footer-wrap {
position:fixed;
bottom:0px;
left:0px;
padding:10px;
}
and then when you place your footer inside it will be correctly padded. This way is the most backwards compatible solution as it doesn't rely on css3 calc.
JSFIDDLE
http://jsfiddle.net/pk8uU/
I have a simple HTML page with a sidebar floated to the left and all content to the right. In the main content area I have an <iframe>. However, when I use CSS to set the height of the frame to 100% it seems to overflow the containing div for some reason, resulting in a small amount of white-space after my content.
Here is my HTML content:
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
</div>
<div id="content">
<iframe id="contentFrame"></iframe>
</div>
</div>
And here is my CSS:
html, body {
height: 100%;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: grey;
}
#sidebar {
width: 100px;
float: left;
background-color: blue;
height: 100%;
}
#content {
margin-left: 100px;
height: 100%;
background-color: yellow;
}
#contentFrame {
border: none;
padding: 0;
margin: 0;
background-color: pink;
height: 100%;
}
(NOTE: Before anybody asks, #container { position: absolute } is necessary for layout reasons; I can't change that.)
You can see it 'working' on this fiddle: http://jsfiddle.net/9q7yp/
The aim is to get rid of the white band along the bottom of the page (i.e. there shouldn't be a vertical scroll-bar in the result). If I set overflow: hidden for #content then the problem goes away. I'm happy to do this if necessary, but I can't for the life of me work out why it doesn't work without this. Can anyone tell me why?
Try to add
display:block;
to the iframe. http://jsfiddle.net/9q7yp/14/
Edit:
Well, it turns out there's a better solution (both in practice and in understanding what's going on):
Add
vertical-align:bottom;
to iframe#contentFrame. http://jsfiddle.net/9q7yp/17/
<iframe>, as an inline element, has the initial value of vertical-align:baseline, but a height:100% inline element will "push" the base line a few pixels lower (because initially the baseline is a few pixels higher from the bottom),
so the parent DIV is thinking "well content will be 2 pixels lower, I need to make room for that".
You can see this effect in this fiddle (check your browser console and pay attention to the bottom property of both ClientRect object).
Add margin:0 to body
html, body {
height: 100%;
margin:0 auto;
}
WORKING DEMO
Add margin: 0 to your html, body {} section.
...................demo
Hi now give to overflow:hidden; of this id #content
as like this
#content{
overflow:hidden;
}
Live demo