SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with 100% height and fixed position.

    In a two-column layout with 100% height and a fixed non-scrolling sidebar, I've two issues:

    1 I'm not sure that I've used the right css for 100% height.

    2 I want to fix the position of an element (a single line of text) to almost the foot (probably about 10px) of the sidebar. I've certainly used incorrect css for this, because if the height of the browser is reduced it moves up and overlaps the content above.

    Here's the basic code...

    CSS

    Code:
    html
    {
    height: 100%;
    }
    
    
    
    body
    {
    background: #fff;
    height: 100%;
    }
    
    
    #sidebar
    {
    position: fixed;
    width: 260px;
    padding: 20px;
    }
    
    
    #sidebar #footer
    {
    position: fixed;
    bottom: 10px;
    }
    
    
    
    #content
    {
    width:  600px;
    min-height: 100%;
    padding: 0 30px;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    margin-left: 300px;
    }


    HTML

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    </head>
    
    <body>
    
    <div id="sidebar">
    
    <h1 id="logo">LOGO HERE</h1>
    
    <p id="footer">A line of text.</p>
    
    </div><!-- /sidebar -->
    
    
    <div id="content">
    
    <p>Main content here. This col has left and right 1px borders which should extend full-height.</p>
    
    </div><!-- /content -->
    
    </body>
    
    </html>
    Help appreciated - please and thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Here is a definitive guide to height: 100%:

    http://www.sitepoint.com/forums/show...41#post1243541

    For the rest of it, CSS isn't well suited for things like this, so you usually end up getting in trouble. Perhaps address the height issue first, though.

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    Having now made what I believe to be the required corrections to sort the height, can the other requirement be met?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Are you able to post a link to what you have so far?

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Are you able to post a link to what you have so far?
    Thanks. There's a simple demo at http://glvr.com/test/1/.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Perhaps you could put some bottom padding on the sidebar so that the text can't overlap other sidebar stuff. It would be good if the example demonstrated the problem. Does the problem occur when there's a lot of text on the left?

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Padding the sidebar won't help as that text is in the sidebar. (I've modified the example to make that clear, without looking at the source.)

    And I tried padding the text element and any above - again no effect, as it just slides up and over when the browser is reduced (granted, it's not likely to happen in normal use but I want to prevent the possibility).

    That demo page does show the problem - just reduce the browser height and watch that text move up... which is probably what the css is meant to do in keeping it x px from the bottom of the viewport.

    And it occurs regardless of how much is in the sidebar - which isn't designed to have more than a logo/strapline, navlgation (now added in that example), and that line of text (which would instead be icons for rss/Twitter/Facebook/ShareThis).

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    OK, probably a better way to go here would be to use the "sticky footer" method detailed here:

    http://www.sitepoint.com/forums/show...66#post1239966

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    Unfortunately (for me), having tried to adapt for a fixed sidebar I don't think that'll work or provide the required effect of having the required element (line of text, social icons) fixed to the lower left corner of the browser window regardless of browser height.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    There's probably a way to do what you want. This would be a good question for @Paul O'B or @Rayzur , two resident experts.

  11. #11
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There's probably a way to do what you want. This would be a good question for @Paul O'B or @Rayzur , two resident experts.
    Thanks. I've had huge help from Paul on several occasions previously - and wish I understood css as well as he clearly does.

    But I dont. And, in view of other issues with this layout - some divs 'submarine' (probably a z-index thing) under others when resized on iPhone, and the fixed sidebar hiding content on small resolutions - I'll abandon it (at least for now) and revert to something I can better understand. A pity, I like the minimalism of it. (The original, of which I'd wanted a simpler variant, is svbtle.com.)

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    I think that's a good idea for now. CSS / web browsers just can't do everything we may want at this stage. It keeps life simpler to work within the common limitations of the technology. In the end, what counts is not layout but content, its organization and its ease of access.

    PS - you basically have what the svbtle site has, except that they don't have any text in the upper left column, but just a logo that covers the text.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Late to the party but.....

    Fixed elements are a bad idea if you want mobile support as support is sketchy to say the least and only the latest iphones I believe support it.

    If mobile is not important then you can do what you want but you will need to provide a scrollbar to your fixed element because content that falls outside the viewport is unreachable when in a fixed positioned element. Fixed elements are always related to the viewport and not the element they sit in.

    Note also that your #content div cannot be both min-height:100% and height:100% as all you get is height:100% and no growth i.e. content will spill out once 100% was reached. So what you need is min-height:100% only and will only work as long as there is no nesting because the percentage needs to be based on the body elements fixed height of 100%.

    The code would look like this.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css.css">
    <title>demo</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style type="text/css">
    /* Reset */
    
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, * {
    	padding: 0;
    	border: 0;
    	margin: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    }
    html {
    	font-size: 100%;
    	font-family:  'Open Sans', sans-serif;
    	height: 100%;
    }
    body {
    	background: #fff;
    	color: #222;
    	font-family:  'Open Sans', sans-serif;
    	line-height: 1.6em;
    	font-size: 16px;
    	height: 100%;
    }
    #sidebar {
    	width: 260px;
    	color: #888;
    	position: fixed;
    	padding:0 20px;
    	top:0;
    	bottom:0;
    	overflow:auto;
    }
    #footer {
    	position:absolute;
    	bottom:0;
    	font-size: 13px;
    	color: #ccc;
    }
    #content {
    	width:  600px;
    	min-height: 100%;
    	padding: 0 30px;
    	border-right: 1px solid #ddd;
    	border-left: 1px solid #ddd;
    	margin-left: 300px;
    }
    #content p { margin: 0 0 10px 0; }
    blockquote {
    	margin: 20px 0 0 0;
    	border-left: 1px solid #555;
    	padding-left: 10px;
    	font-size: 0.8rem;
    }
    #sidebar ul {
    	list-style: none;
    	font-size: 1.2rem;
    	padding: 0 0 50px;
    	margin: 150px 0 0;
    }
    #sidebar ul li { padding: 3px 0; }
    #inner {
    	min-height:100%;
    	position:relative;
    }
    </style>
    </head>
    
    <body>
    <div id="sidebar">
    		<div id="inner">
    				<h1 id="logo">LOGO HERE</h1>
    				<ul>
    						<li>link</li>
    						<li>link</li>
    						<li>link</li>
    						<li>link</li>
    						<li>link</li>
    				</ul>
    				<p id="footer">A line of text in the sidebar.</p>
    		</div>
    </div>
    <!-- /sidebar -->
    
    <div id="content">
    		<p>Main content here.</p>
    		<p>This col has left and right 1px borders which should extend full-height.</p>
    		<blockquote>
    				<p>The 'a line of text' at the foot of the sidebar should remain approx 10px from the bottom of the browser window, even when it's resized smaller - and thus trigger a scrollbar.</p>
    				<p>Currently it doesn't, and with a sufficiently-small browser window it'll overlap the content above it. (I think the positioning should be relative to its enclosing div, but I don't know if this can be done with css.)</p>
    		</blockquote>
    		<blockquote>
    				<p>The 'a line of text' at the foot of the sidebar should remain approx 10px from the bottom of the browser window, even when it's resized smaller - and thus trigger a scrollbar.</p>
    				<p>Currently it doesn't, and with a sufficiently-small browser window it'll overlap the content above it. (I think the positioning should be relative to its enclosing div, but I don't know if this can be done with css.)</p>
    		</blockquote>
    </div>
    <!-- /content -->
    
    </body>
    </html>
    You can remove the overflow from the sidebar but then when the browser height is too small the content will be unreachable.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •