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.
Related
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 am having a lot of trouble figuring this one out, essentially I have 3 columns: navbar (dark gray), main content (dark red) and sidebar (dark green) where navbar can be expanded and shrinked and sidebar can slide out and slide in (so change width from 0 to something and back to 0). And I want to keep all of this responsive. Idea is to shrink main content accordingly when some or both navbar and sidebar are expanded. unfortunately only way I can think to do this is to change width of main content to something like width: calc(100% - navbar width - sidebar width) but this is really verbose when I need to check if sidbar is expanded or navbar, or both are not expanded etc...
Here is an image illustrating how main content shrinks:
I assume flexbox could be used here somehow, but was not able to figure it out.
let example marku be
<nav> </nav>
<main> </main>
<aside> </aside>
note: nav and aside need to be 100% height of the page and are fixed in place.
You can use flex-box for this. A simple approach would be as follows: http://codepen.io/anon/pen/pgVVJb
You can change the classes to see how it changes the layout. NOTE: I am using classes to change the width of the columns but you could use JavaScript or static CSS similarly.
Code dump:
<div class="container">
<div class="small">Nav</div>
<div>Content</div>
<div class="medium">Sidebar</div>
</div>
html, body, div {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.container div {
flex: 1;
border: 1px solid #ccc;
background: gray;
}
.small {
max-width: 50px;
}
.medium {
max-width: 150px;
}
One popular solution to this is putting all of these elements in a wrapper with position: relative or even putting setting body's to position: relative, and all the elements inside with position: absolute. Then you can set each element as follows:
.navbar {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 50px;
}
.main-content {
position: absolute;
top: 0px;
left: 50px;
bottom: 0px;
right: 150px;
}
.sidebar {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 150px;
}
Of course the container element need to have some height for this to work.
This question has been asked an awful lot of times here, but I am yet to find a conclusive answer to this.
I'm working to implement right and left 100% height, fixed sidebars in my design. The Left sidebar works great, but the right one floats over the (min-width'd) content when the browser is resized.
When I set the position of the bars to absolute, it behaves well with horizontal window resizing, but then the sidebars aren't fixed on vertical scroll.
Check out my jsfiddle: http://jsfiddle.net/wjhzyt0u/17/
(If you resize the window, you can see the right blue bar float over the middle grey content).
HTML
<div class="wrapper">
<section id="sidebar-nav">
</section>
<section id="content">
<p>some rad stylin' content</p>
</section>
<section id="sidebar-notif">
</section>
</div>
CSS
html, body {
position: relative;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
height: 100%;
width: 100%;
min-width: 450px; /* dont want to squish the content too much */
}
#sidebar-nav, #sidebar-notif {
position: fixed;
height: 100%;
width: 150px;
background: lightblue;
}
#sidebar-nav {
top: 0;
left: 0;
}
#sidebar-notif {
top: 0;
right: 0;
}
#content {
margin: 0 150px;
height: 300px;
background: lightgrey;
border: 2px solid yellow;
}
Any help would be very welcome!!
My 'solution' for anyone else looking at a similar situation.
I ended up going with absolutely positioned sidebars (which scale to the size of the middle content), and added the Waypoint sticky plugin to scroll the sidebar content.
Updated JsFiddle: http://jsfiddle.net/wjhzyt0u/20/
Sticky divs stick to the top of the page on scroll - thus creating the illusion of 100% height sidebars.
Drawbacks are extra js weight + page load times.. but I'll take it for now.
Changes:
.wrapper {
position: absolute;
width: 100%;
min-width: 500px;
// removed 100% min-height, which lets the sidebars stretch to 100% height of the content.
}
#sidebar-nav, #sidebar-notif {
position: absolute; // changed to absolute from fixed.
height: 100%;
width: 150px;
background: lightblue;
}
// added sticky divs to sidebars, which stick to the top of the page on scroll (with help from Waypoints sticky plugin.
.sticky {
border: 1px solid red;
}
I am trying to design a layout where i will have header 100px at the top. footer 80px always stick to the bottom of browser screen and an scrollable content area in between header and footer. the vertical scrollbar should come in the content area when i finished writing till the content touches the top end of footer.
Can Anyone suggest me how can i achieve this
Here is what i have tried: JsFiddle
<header>
</header>
<div id="main">
<div id="content">
scrollable content area
</div>
<footer>
footer always appearing bottom of the browser screen
</footer>
</div>
My css:
header {
height: 100px;
width: 100%;
background: #bbb;
}
#main {
background: #ccc;
width: 100%;
height: 100%
}
#content {
position: relative;
height: 100%;
width: 100%;
background: green;
overflow-y: auto;
}
footer {
position: relative;
bottom: 0;
height: 80px;
width: 100%;
background: #aaa;
}
EDITED: FIDDLE
#content {
position: absolute;
height: calc(100% - 180px);
background: green;
overflow-x: hidden;
overflow-y:scroll;
}
I answered a similar question before at: Div height percentage based but still scrolling
Here is one approach.
The HTML:
<header>The Header...</header>
<div id="main">
<div id="content">
scrollable content area
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
</div>
<footer>footer always appearing bottom of the browser screen</footer>
The CSS:
html, body {
height: 100%;
}
body {
margin: 0;
}
header {
height: 100px;
width: 100%;
background: #bbb;
position: absolute;
top: 0;
}
#main {
background: #ccc;
width: 100%;
position: absolute;
top: 100px;
bottom: 80px;
left: 0;
right: 0;
overflow-y: auto;
}
#content {
overflow: auto;
background: green;
}
footer {
position: absolute;
bottom: 0;
height: 80px;
width: 100%;
background: #aaa;
}
The trick is to create an absolutely positioned block container that spans the area between the header and the footer, #main, using the top, bottom, left, right offsets, and apply overflow-y: auto.
The #content will then take up space and eventually trigger the scroll bar on #main.
See demo at: http://jsfiddle.net/audetwebdesign/aNRE9/
You will need to use JavaScript for this unfortunately. No big deal. I've also added the handler for when you resize the window.
var resizeTimer;
window.onload = function(){
makeMiddleFull();
}
window.onresize = function(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(makeMiddleFull, 100);
}
function makeMiddleFull(){
var cobj = document.getElementById('content');
cobj.style.height = (getDocHeight() - (document.getElementById('header').style.height + document.getElementById('footer').style.height)) + "px";
}
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
See updated fiddle for full code updates including DOM and CSS here:
http://jsfiddle.net/Qpc2s/2/
Just tell me what you have tried? I don't see any header, any footer, just a text there in the scollable div.
Ok let me guide you a bit.
What you do is simple but would require you to understand the point.
How to make the footer stick to the bottom.
footer {
position: absolute; // position as absolute..
bottom: 0; // margin-bottom as 0
max-width: 80px; // width
margin: 0 auto; // margin..
}
This will make the footer to always stay at the end of the document I mean at the bottom of the page.
How to make header
header {
position: absolute;
top: 0;
max-width: 100px;
margin: 0 auto;
}
How to make a scrollable div
I donot fully understand this one. So I am just going to guide you a bit.
You can create a scrollbar in the content div. You want this:
the vertical scrollbar should come in the content area
You can do that by using this:
div {
max-height: 100px;
min-height: 100px;
}
I will assume that you are going to change the div to the element or class or id to the one you're having.
Making a scrollable div with a scrollbar.
First you will create a div with a max-height, to make the div not exceed the height of the screen. Then you can use a scrollbar like this:
overflow: scroll;
Add this property to the element. This way, you'll have a footer, an header, and a content block which has a scrollbar for it self, not the one that browser has.
Fiddle for this:
http://jsfiddle.net/afzaal_ahmad_zeeshan/aNRE9/2/
I am really sorry but I didn't bother changing the background, but you can see, the header stays there, footer at the end, and the div scrolls! :)
Good luck!
If you look at messages page in facebook, there is a header and below it there are three sections. The scroll bar controls the middle section and the left and right sections remain static. How do I implement the same behavior on my webpage? That is everything remains fixed and the scroll bar only controls the middle section? By the way, Facebook's implementation does not work properly in Chrome and in FF stops working when Firebug is turned on.
You don't need to set anything special on the center section. Every block element you want to remain stationary needs to have position: fixed;.
eg
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
header {
display: block;
position: fixed;
z-index: 10; /* keeps the header over the content as the content gets scrolled */
top: 0;
width: 100%;
height: 100px;
padding: 10px;
background-color: black;
}
#sidebar {
position: fixed;
top: 120px; /* add height + padding of header */
left: 0;
width: 150px;
padding: 10px;
background-color: blue;
}
#content {
margin: 120px 0 0 170px; /* add adjacent elements' size + padding */
padding: 10px;
}
</style>
</head>
<body>
<header>
This will stay on the top of the browser window.
</header>
<div id="sidebar">
This will stay on the left.
</div>
<div id="content">
This will scroll normally.
</div>
</body>
</html>