100% Screen Size Regardless of Resolution
Question
I'm attempting to make a website in which the user navigates vertically between a series of sections. Basically each section takes up the whole screen, regardless of screen resolution, and has a button on the bottom that will scroll down to the next, full screen div. any idea on how to approach this? the buttons seem like simple enough java script but i'm not quite sure how to approach the full screen divs
thanks!
3 answers
solution1
0 2013-06-19 20:40:11
As an approach, you're going to want to only show on div at a time, so you might want to look at how various JS slider plugins work (one of the most robust and flexible is Flexslider by WooThemes).
You'll want to make sure that whatever "slide" is currently visible has a fixed position that occupies the full screen:
.slide {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
And then just put your content in there. That said, I do question the usability of an approach like this.
solution2
0 2013-06-19 20:43:11
The <body> div that contains all the displayable html for a site takes up the whole screen.
By setting a div's height and width to 100%, you can ensure that it takes up the entirety of its containing div.
Using the height and width properties and setting them to percentages, you can create divs and content that take up an entire screen, no matter what its size.
You can use this tool to see how your site looks on different desktop, tablet, and mobile screens.
solution3
0 2013-06-19 20:49:18
If you were talking about full screen window, not sure about it. But if you are talking about occupying the complete browser width and height then must try
- Make these sections position absolute
- Align them to Top=0 and left= 0 with 100% width and height
Just let the button on every section know how to show the next section and hide the current one.
- Make sure that no parent elements of these sections be positioned relative else this will fail.
<div id="container"> <div id="section1">Section1Content <button id="btnSec-1"></button></div> <div id="section2">Section1Content <button id="btnSec-2"></button></div> <div id="section3">Section1Content <button id="btnSec-3"></button></div>4 </div>
Your css:
section1,#section2,#section3{position:absolute;top:0;left:0; width:100%;height:100%;}
Your Jquery Script
$("[id*=btnSec]").on("click", function(e){ var sec = $(this).attr("id").split("btnSec-")[1]; var nextSec = Number(sec)+1; $("#container").children().hide(); $("#section"+nextSec).show(); })
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.