making a specific section tag 100% width and height of window

I have the following structure:

<section id="first">
  <div>
   <h2>Header</h2>
   <p>Des</p>
   <a href="#second">Link</a>
  </div>
</section>
<section id="second">
  <div>
   <h2>Header</h2>
   <p>Des</p>
   <a href="#first">Link</a>
  </div>
</section>

I want section#first to be width 100% and height 100% no matter what size the window is and then when the anchor tag is clicked i want section#second to do the same making each section effectively its own page.

Ive tried开发者_如何学Python adding width: 100% and height: 100% to each section but i think js is required to achieve this? can anyone advise me on how this can be achieved?

Kyle

Using width: 100%; should effectively keep the div at the width of the window, but the height is a little tricky.

One technique is to use javascript to maintain the height. Here's an example.

function handleResize(){
    $("#first").height($(window).height());
}

This will set the height on page load, but as the page is resized it won't update.

To handle the resizing you can bind to the resize event.

$(window).bind('resize', handleResize);

You might also need to consider some other events, for example: onorientationchange is an event fired by the iPad when it is rotated.

These code samples use jQuery for simplicity, but it's not required.

To have the two pages alternate, you can do something like:

function handleResize(selector){
    $(selector).height($(window).height());
}
function handleShrink(selector){
    $(selector).height(0);
}
$("#pageTwoLink").click(function(){
    handleShrink("#first");
    handleResize("#second");
}
$("#pageOneLink").click(function(){
    handleShrink("#second");
    handleResize("#first");
}

Of course, this could be drastically cleaned up, if you provide some more information about the exact specification.

By setting the position property to fixed, you allow the two sections to exist in the same spot.

section{ position:fixed; top:0;bottom:0;left:0;right:0;}

Then you can use javascript to change which one is visible:

$('a').click(function(){
  $(this).closest('section').hide();
  $($(this).attr('href')).show();
});

Great! No javascript required! its like 2 sections of easy css:

  section#first{
    background:darkkhaki;
  }
  section#second{
    background:darkseagreen;
  }

  section#first:target,section#second:target{
    width:100%;
    height:100%;
  }

DEMO: http://jsbin.com/emeyag/edit