2

There must be over a dozen posts with a similar title but none that I have found have been effectively able to do what I thought would be a simple thing which is allow multiple elements to have a height of 100%. Take the following code:

<html>
<head>
<style>
html, body, [role="main"] {height:100%; width:6in; overflow:hidden;}
[role="banner"] {position:fixed; top:0; left:0;}
.height {height:100%; width:100%}
</style>
</head>
<body>
<header role="banner">
<nav>
<a href="#1">Section one</a>
<a href="#2">Section two</a>
<a href="#3">Section three</a>
</nav>
</header>

<div role="main">

<section id="1" class="height">
</section>

<section id="2" class="height">
<header>
<h1>section title</h1>
</header>
<button>Navigate Articles</button>

<article class="height">
<h1>title</h1>
<p>paragraph</p>
</article>

<article class="height">
<h1>title</h1>
<p>paragraph</p>
</article>

</section>

<section id="3" class="height">
</section>

</div>

</body>
</html>

I want to be able to navigate without scrolling. Clicking on a link that takes you to a section and that section will fill 100% of the screen height. When I used the above code I do not get the effect I am looking for. I was close at one point using fixed position on elements with the class "height". It worked on the first section, but the lower sections and the articles within the section two would overlap.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
Hezerac
  • 334
  • 1
  • 5
  • 20

2 Answers2

0

Achieving the functionality you've requested with CSS alone isn't practical. Since you're referring to showing and hiding content, you may need to implement a small amount of javascript to bind click actions to hide/show functions when the nav links are clicked.

I applied the following to your code:

jQuery:

//Hide all .height sections at first.
$('section.height').hide();

//Show them, when their respective link is clicked.
$('nav a').click(function() {
    var $this = $(this);
        section = $this.attr('href');

    $(section).siblings('.height').hide();
    $(section).show();    
});

And updated your CSS;

html, body, [role="main"] { 
    height:100%;
    overflow:hidden;
}
body {
    position: relative; /*so .height is relative to body when absolutely positioned*/
}

[role="banner"] {
    background: yellow;
    position:fixed;
    top:0;
    left:0;
    z-index: 999;
}

.height {
    background: red;
    height:100%;
    width:100%;
    position: absolute;
}
h1 {
    margin-top: 30px; /* to prevent menu overlap. */
}

You can see the results here: http://jsfiddle.net/mUEYM/2/

The basic premise is setting the .height elements to be position: absolute;. This will allow them to expand to the exact height/width of the browser window, provided that html and body also have 100% width & height.

I applied a z-index value to the nav, to ensure that it sits above the .height sections when they are displayed.

Axel
  • 10,732
  • 2
  • 30
  • 43
  • That's pretty good. It's the effect that I am looking for but practical or not I would prefer CSS only and avoid the jQuery. Do you have any suggestions on how that could be done? Thanks. – Hezerac Feb 01 '13 at 00:01
  • Like I said, you're dealing with functionality that involves element manipulation based off of user interaction. CSS is quite simply not designed to handle these sorts of operations. – Axel Feb 01 '13 at 00:08
  • I don't think hiding the elements should be necessary. With the current navigation it is possible to jump to a section id. How can we make it so the incoming section's height is 100%? That should be possible with just CSS. – Hezerac Feb 01 '13 at 00:13
  • For compatibility, it's the best way to go. You're ensuring that what you want to be displayed, is on the screen. You can look at this non-javascript example that works in modern browsers: http://jsfiddle.net/mUEYM/3/ It doesn't seem to work in IE8 and below though. My recommendation based off my experience with this stuff is to use jQuery to achieve stable results. – Axel Feb 01 '13 at 00:19
  • Ok that's perfect, but now you've reached the part that I cant figure out. On your fiddle go to section three and you will see the title and paragraph from an article in section two. How to make the child elements of section two also 100% when navigated to, and keep their contents from overlapping sections below? – Hezerac Feb 01 '13 at 00:32
  • I am telling you. Based on my experience, you cannot achieve what you are trying to do without some javascript. This is because when you click on a link, nothing is physically applied to the section it relates to. There is no focus, or active state to grab on to. You can read the various reasons why here: http://stackoverflow.com/questions/7876283/using-focus-to-style-outer-div – Axel Feb 01 '13 at 00:40
  • Maybe I'm describing this wrong. I don't want to apply an on click event but to just navigate to each element, whether it be a section element or an article within a section. And just as you can navigate to the sections in your fiddle and have each one at 100% height I also want to do so when navigating to the article elements within section two. If it is possible to do so with the sections elements (as it is in your fiddle), then it should be possible to do so with the child elements of a section. – Hezerac Feb 01 '13 at 00:56
  • What you're trying to accomplish is to view one piece of content, without displaying the others. This requires that you either A) stack one piece of content on top of the other, hiding the other. Or B) Hide the other content, while displaying the one you want. Both scenarios require some sort of display change to the content (either a z-index, position change or a display change). To do this, you need to apply something unique to the content you are viewing, so it can be represented differently from the hidden content. This cannot be achieved with HTML/CSS alone. – Axel Feb 01 '13 at 16:54
  • Furthermore, the what is happening when you are clicking an `` linked to a hash is the browser 'scrolling' to that element, and setting it to the very top of the browser window. It is NOT changing anything in the DOM itself, which means you cannot target that element specifically. If you want to use hastag navigation, you can list the content in a vertical manner, and use the fixed links to scroll to each article of content. Here is an example of a navigation method using pure HTML/CSS: http://css-tricks.com/examples/HashLinksWithPadding/pseudo.php – Axel Feb 01 '13 at 16:58
0

Ok I finally got this to work with pure CSS. The problem was not moving from section to section but with controlling the child elements.

.parent { height: 100%; position: relative; overflow-y: hidden }

.child { min-height: 100%; }

For an explanation see this Soure

Community
  • 1
  • 1
Hezerac
  • 334
  • 1
  • 5
  • 20