I've recently tried out to make a website with a bar on top and with an image that cover the rest of the screen, much like this X-theme demo. I've managed to get it right in proportion (with a lot of help from this thread).
<body>
<div id="block">
<p>logo</p>
</div>
<header>
<h1>jumbotron</h1>
</header>
<div id="page">
<p>content</p>
</div>
*{
margin: 0;
}
#block {
height: 10vh;
width: 100%;
background: red;
background-size:cover;
}
body{
width: 100%;
height: 100%;
}
header {
height:90vh;
width:100%;
background: green;
background-size:cover;
}
This solution is however not so practical. When you shrink down your browser window, the bar on top (naturally) shrinks as well. Adding a logo would then be impossible, so I wonder if there is any way to make the bars size constant, while the header still takes up the rest of the screen?
I would really appreciate some help! :)
Because vh and px are two different units, it is not possible to do some math with them like 100vh - 30px, but it's possible using some jQuery/JavaScript. I'll give you an example using jQuery (Be sure to add a fixed height to the header).
On the end of this answer there is a CSS-only solution for this problem. Found out about it later.
This is the html code:
<header class="header">YOUR LOGO HERE</header>
<section class="jumbotron">CONTENT HERE</section>
<section class="content">SOME OTHER CONTENT HERE</section>
And this should be the javascript one:
var resizePage = function() {
var headerHeight = $('.header').outerHeight() // Getting the height of the header
, pageHeight = $(window).height(); // Getting the height of the window
$('.jumbotron').css('height', (pageHeight-headerHeight));
}
$(window).on('resize', resizePage()); // Fire every time the page resizes
resizePage(); // Fire once the site is running
Here is a JSFiddle working with the snippets I told you: CLICK ME
UPDATE: Just found out that CSS is providing a calc() method. Here is another JSfiddle with this method: CLICK ME, TOO. So it is possible using pure CSS, but be aware of the browser support for this.
.jumbotron {
/* Viewport height 100 minus 50px calculated using pure css */
height: calc(100vh - 50px);
}
Related
I've used viewport height numerous times with success but this time it is causing me problems and I cannnot figure out why. You can see my issue on this web page: http://staging.chinahiking.cn/great-wall-hiking/wild-jinshanling-to-restored-jinshanling-great-wall-hike-1day/
.top-container.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.viewport-height {
height: 80vh;
}
<body>
<div class="top-container sticky"></div>
<div class="content">
<div class="viewport-height"></div>
<div class="description-container"></div>
</div>
</body>
But for some reason, the viewport height is not registering. And, when I change the screen height, the content within .description-container overlaps the content in my .viewport-height container. Does anyone know why this is happening and how I can get the content within my viewport-height container to be either 80vh or 100vh?
Make it height auto fix your problem because of contain problem is coming
.description-section-divider {
height: auto;
}
If you need some white space give some padding as per your requirement else if you want to fix using height:287px then you hvae to write media query for that better suggestion take height:auto;
Trying to find the answer quite long, but I am not even sure how to express the question to searchbar - so I'll try to explain here and if you know that it was already answered I will be happy for the link :)
I am creating a wordpress theme using The Underscores framework. I want make my header to be dependent on the background image height. I mean - I can upload there an image of any size and header's width will be 100 % of image and height wll be dynamically change according the screen size.
Better for imagination, here's an example:
http://hitchdiary.cz/
Try to change size of the window - image is allways fully displayed and the height of the header changes.
So that's what I want. What I have is a static size header and background image is adjusting according the screen size.
.site-header {
height: 100%;
width: auto;
background-color: #000;
background-size: 100%;
}
Header image is set by user in wordpress adjust section. In code it is this way:
<?php if ( get_header_image() ){ ?>
<header id="masthead" class="site-header" style="background-image: url(<?php header_image(); ?>)" role="banner">
<?php } else { ?>
<header id="masthead" class="site-header" role="banner">
<?php } ?>
Thanks for any advice. Sorry if that's obvious. I'm quite a newbie.
WHAT'S GOING NOW:
demo
The height is calculated automatically according to the content in the div. By setting it to 100% you're telling it to take the height of the parent container.
Setting height to auto will solve your problem.
.site-header {
width: auto;
background-color: #000;
background-size: 100%;
}
or
.site-header {
height: auto;
width: auto;
background-color: #000;
background-size: 100%;
}
Flexible Width
Sorry I mistook it to be flexible width instead of height. Please ignore what comes below this statment. However it might help you in adjusting width in the future.
By default div, header, footer etc are block elements. They take up 100% of the parent div.
Say you have a
<div class="parent" style="width:500px;">
<div class="child"> </div>
</div>
Here the inner div takes up 500px as well.
I tried out similar code, all you have to do set display to inline.
.site-header {
display: inline;
}
You can even try floating it to the left/right in case making it inline doesn't work.
You can read more about the differences between block and inline
I've searched for a lot of answers and tricks for this but nothing worked for me.
Some briefing: The project has a homepage with 5 sections (about us,activities,contact etc...). Each section must have AT LEAST 100% height. That means that if the child's containt is "little", then the section must have height 100% (the screen resolution has effect here). But if the child's containt is "large", then the div with class bg-color and the section must expand to over than 100% height so it can contain all the content. Each section has a different background-image and i used bg-color to add a transparent color over the background image.
The html structure seems like this
<section class="each-page about-us">
<div class="bg-color">
<div class="container page-content">
...CONTENT...
</div>
</div>
</section>
<section class="each-page activities">
<div class="bg-color">
<div class="container page-content">
...CONTENT...
</div>
</div>
</section>
<section class="each-page work-with-us">
<div class="bg-color">
<div class="container page-content">
...CONTENT...
</div>
</div>
</section>
The css seems like this:
body, html {
height: 100%;
width: 100%;
}
.about-us {
background-image: url("../images/bb2.jpg");
}
.each-page {
border-top: 1px solid #fff;
height: 100%;
}
.bg-color {
background-color: rgba(35, 124, 170, 0.6);
height: 100%;
width: 100%;
}
Some divs with class container page-content have a lot of content. But since the parent divs have height:100%, this content overlays the section at the bottom and it's pretty ugly. Especially when i test it in low resolution screens, almost every section seems broken! i dont want to set overflow with scroll bars.
Any suggestions/solutions please? Since the project will be mobile friendly (bootstrap), a responsive solution would be the best option.
Thank you in advance.
You can achieve it by using view height unit vh , in the fiddle you can see that every .section div has at least full height, see sectionThree has lots of content so it has more height
JS Fiddle
.each-page {
border-top: 1px solid #fff;
min-height: 100vh;
}
----------
UPDATE 1:
In order to fix it for Safari versions less that 8 -because view units are supported in Safari 8+- all you need is to add this to your javascript:
var UA = navigator.userAgent,
Ver = parseInt(navigator.appVersion,10);
if (UA.indexOf("Safari")!=-1 && Ver < 8) {
// it is safari and version less than 8;
// use javascript to fix it.
$('.each-page').css({'min-height': $(window).height()});
}
And that's it JS Fiddle 2, tested on Safari 5.1.7
http://caniuse.com/#feat=viewport-units
https://css-tricks.com/viewport-sized-typography/
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
https://dev.opera.com/articles/css-viewport-units/
http://www.w3schools.com/cssref/css_units.asp
You can also make section 100% height with js
$(window).on("resize", function () {
var fullHeight = $(window).height();
$('section').height(fullHeight);
}).resize();
.s-one {
background: blue;
}
.s-two {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="s-one"></section>
<section class="s-two"></section>
EDIT 2:
There was an error in my code that was causing the footer to not stick to the bottom of the page. My code looked something like this:
<div id="footer">
<div id="copyright-bg" class="container">
<div class="row">
<div class="twelvecol">
<p class="copyright-text">Lorum Ipsum</p>
</div>
</div>
</div>
</div>
I removed <div id="footer"> and moved those CSS properties to id="copyright-bg" and it then began to stick properly to the bottom. But now there has risen another issue! I now have unnecessary scroll bars! Here is a Fiddle that has the barest of code to attempt to figure what is going on. I thought it could be the gradient but when I changed the code to a solid background the scroll bars still appeared.
Note: I have tested in Chrome and Firefox.
EDIT:
I have attempted to use the CSS Sticky Footer per instructions on the website.
I assume there is a conflict in my CSS(?) here is a Fiddle of the page.
I have also attempted what this website suggested and while it technically works it creates scrollbars! I would like to avoid that if possible.
Original Question
I am working on a page and if the page does not have much content (IE no scroll bars for the page) I am left with a black bar below my copyright container.
Here is a screenshot:
Note: Where you see the word Done is the bottom of my browser, an arrow is pointing to the black bar.
I have attempted a few things to remove the bar. When I add height: 100%; to the body tag it will take my background gradient and it will reach to the bottom of the page but again that doesn't look good. I then attempted to add height: 100% to the copyright container. That caused the gray area to stretch way down and cause excessive empty space and scrollbars. I have attempted to position the element absolutely but that causes several other issues and would prefer to avoid positioning absolutely.
How do I remove the black bar? (Preferably with just CSS but will accept an answer that uses jQuery/Javascript)
CODE:
HTML:
<!-- Body Content Is Here -->
<div id="copyright-bg" class="container">
<div class="row">
<div class="twelvecol">
<p class="copyright-text">Ipsum</p>
</div>
</div>
</div>
CSS:
html, body{
font-size:1em;
font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
line-height:1.438em;
color:#222;
margin: 0;
padding: 0;
text-align: justify;
background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%);
/* Vendor Specific Background Gradients... */
}
#copyright-bg{
margin-top:1.875em;
background: none repeat scroll 0 0 #666666;
border-top: 5px solid #E31836;
padding:1.250em;
}
.container {
padding-left: 20px;
padding-right: 20px;
}
.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.row .twelvecol {
width: 100%;
float: left;
}
If you have tried multiple solutions (like Ryan Fait's footer or the CSS Sticky Footer (this link is broken, see this instead), which is my favorite) then I would bet that you have a bigger problem than face value. Those two examples have proven the test of time and yet still remain the most commonly used methods for creating a footer which sticks to the bottom of the page. While I'm not bashing your code, I would suggest that maybe you redo the page you're creating from scratch and have the first implementation be the sticky footer. From there you should just be able to copy and paste over your visual styles and if it screws up again then you know your culprit line of code.
EDIT:
I needed to edit your code a bit because the lack of indentation made it difficult to read. Here's the new jsFiddle. What I did change were a few things. Here's the additions to the top of your CSS code:
* {margin:0;padding:0;}
html, body {height: 100%;}
#content-wrap {min-height: 100%;}
Those lines are 100% necessary to make your code work. Not only do you need to do a wildcard (*) reset on all elements, but you also need to tell the document (html) and the body (body) to take up the full height of the screen. I don't remember if it was in your original CSS, but #content-wrap should have a min-height of 100% as well.
After searching through, I realize your footer isn't actually 180px in height, but rather 100px in height. Here's the final jsFiddle. And also, here's the final code to make the footer stick:
#main {overflow:auto;
padding-bottom: 100px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;}
You should see now that when you apply this code, the footer sticks to the bottom (and does so without duct tape). Hope this helps!
Majority of the sticky footer codes seem to cause issues with my page. To work around this issue I am using the following code:
HTML
<body>
<div id="page-content">
<header>
<!-- Header Content Goes Here -->
</header>
<!-- Page Content Goes Here -->
<footer>
<!-- Footer Content Goes Here -->
</footer>
</div>
</body>
JS
$(function() {
var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
$("#page-content").css("min-height",height+"px");
});
What this does is calculate the height of the page and set a minimum height for the page, thus sticking the footer to the bottom. It works beautifully.
Note: I am using HTML5.
Is there a way to mimic the native transition and functionality of "sliding entire pages" like you see on the iPhone but inside a web browser instead?
I want one HTML page to slide over and a new HTML page to take it's place after the press of a button.
The button cannot be constant. So like if you were to have a constant header with buttons that slid content inside a box then that would be incorrect. I need to slide the entire webpage.
Would slides made in HTML5 be what I need? Thank you in advance for any help!
Edit: I have also been thinking about possibly setting up two full-sized DIV's side by side with one hidden off the page with "overflow:hidden" and then using CSS transitions to hit a button and then move one DIV off the screen and the other one into view, but I have no idea how to do that.
The other really hard part about this is that my DIV containers need to be dynamic and 100% width and height. I can't used fixed dimensions.
EDIT:
Using the scrollTo and localscroll functions developed by Ariel Flesler I have been able to complete 99% of what I am looking for. However, at the very end of development, I hit a huge road block. Here is an image that I hope helps explain what I am trying to do:
My problem is that the main content area is a fixed position with an overflow-y auto so that I can keep the scrollbar for the DIV inbetween the header and the footer. But the problem is that when I initiate the sliding animation of my DIV by hitting my button, the fixed content area does not move and only the header and footers move. If I change the positioning of the main content area to "relative" everything moves like I want it to, but I lose the positioning of the scroll.
If someone could figure this out I will be greatly indebted to you!
(I would post a link to what I have, but I can't. It's confidential work for a company)
Thank you in advance!!
EDIT
I am working on reviewing all this information. I will respond in a couple days. Thank you all for you input!
I am currently developing something that may be useful to you. It uses the side by side divs you considered but I found difficulties in using 100% width due to issues with the scrollbars and differences in the browsers. I have overcome this by setting the widths in javascript (jQuery) which offers a cross-browser solution (tested in IE7, IE8, FF, Chrome, Safari, Opera).
Feel free to take as much of the source code as you like by inspecting the source and if you need me to talk you through anything, just let me know.
http://madesignuk.com/uploader/
PS I'm not 100% sure on the rules regarding posting the link to my personal site so if it is an issue for moderators, please let me know.
PPS The site is in development so please try not to mock me :p
You can do that by placing elements side by side inside a container with overflow:hidden, and just move the inner elements.
Here is a proof of concept. It doesn't handle resizing of the page after it has loaded, but it at least shows the principle. I have put three slides in the container, but the code is dynamic so that you can place any number you like.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Slide</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var w = $(window).width();
var h = $(window).height();
var slides = $('.Slides > div');
$('.SlideContainer').css({ height: (h-60) + 'px' });
$('.Slides').css({ width: slides.length + '00%' });
slides.css({ width: w + 'px' });
var pos = 0;
$('.Left').click(function(){
pos--;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
$('.Right').click(function(){
pos++;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
});
</script>
<style type="text/css">
body { margin: 0; padding: 0; }
.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }
.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }
</style>
</head>
<body>
<div class="Header">
absolutely positioned header
</div>
<div class="SlideContainer">
<div class="Slides">
<div class="Slide">
<div class="Content">
<h1>Slide 1</h1>
«
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 2</h1>
«
»
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 3</h1>
»
</div>
</div>
</div>
</div>
<div class="Footer">
absolutely positioned footer
</div>
</body>
</html>
Edit
Now jsfiddle is up again, so you can try it out here: jsfiddle.net/9VttC
Have you looked at LocalScroll? It will make all hash links scrollable within the container you define. You would have to set the width of slides though, as you'll need to float them.
Use the scrollTop CSS attribute : you want to scroll down 100px in your main content area ?
Just do that :
var newScrollTop = document.getElementById("main_content_area").scrollTop + 100;
$("#main_content_area").animate({scrollTop: newScrollTop}, 500);
The second line is made up with jQuery, but just remember the principle : affect the new scrollTop value to your main_content_area div's CSS.
Try JQuery Cycle plugin.
http://jquery.malsup.com/cycle/
They have provided lot of sample code and tutorials, so it is easy for you to build it your own way.
If I understand correctly, the scrollTo method works, but only if you change the position:fixed to position:relative, which has the consequence of making the scrollbar stretch beyond the scrolling div?
Wouldn't it be easier to put a wrapper div around your main content area with a top margin to account for the header and a bottom margin to account for the footer, and set it to have overflow:scroll, and to use the scrollTo function within it?
The Google Chrome Team made 20 Things I Learned About Browsers and the Web which has this effect.
Just as a theoretical example, but I would create static HTML pages and use jQuery to load the content from them (to provide compatibility). The main problem would be the scrolling.
I use jQuery to calculate the width of the browser, set that to be the width of the <body>, and then set overflow: hidden. Then, just create an absolutely positioned content box, and slide both of them at once.
I'll post some code later, but this is what I would begin with (I, being a pathetically incompetent JS fiddler).
You could use something like Coda Slider, and have the content of the slide be the whole page.