Results 1 to 5 of 5

Thread: CSS Wrapper Extending Content

  1. #1
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    445
    Thanks
    6
    Thanked 43 Times in 41 Posts

    Default CSS Wrapper Extending Content

    So either I'm braindead, not thinking, or just plain stupid (maybe all three)
    I currently have two simple html elements
    HTML Code:
    <div id="mainWrapper">
    	<div id="content">
    		x
    	</div>
    </div>
    My css currently contain:
    Code:
    * { 
      margin: 0px auto; padding: 0px;
      font: 14px/28px Arial, sans-serif;
    }
    li {list-style: none;}
    
    body { background: #F5F4ED; }
    html, body { height: 100%; }
    I am wanting the first #mainWrapper to be 100% on the head/body which I know is height: 100%;
    However, the issue is I also want the #content to be 40px lower while being the reminder of the space (at least). EG height: calc(100% - 40px); while the mainWrapper still being at the top of the page.

    If there is more content in the #content section then it would auto-fit to the end else, like before, 100% - 40px

    Any ideas?
    Last edited by Deadweight; 04-13-2017 at 03:42 AM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    445
    Thanks
    6
    Thanked 43 Times in 41 Posts

    Default

    NVM: For anyone else (https://jsfiddle.net/k4z9zgfr/)
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,725
    Thanks
    46
    Thanked 214 Times in 207 Posts
    Blog Entries
    52

    Default

    Even simpler:
    Code:
    <style>
    #top_bar {position: fixed; left:0; top:0; right:0; height: 40px; background: red}
    #content {position: absolute; left:0; top: 40px; right: 0; bottom:0; background: green; overflow: auto}
    </style>
    
    <div id="top_bar">top bar</div>
    
    <div id="content">Content</div>

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    445
    Thanks
    6
    Thanked 43 Times in 41 Posts

    Default

    Thanks but there is a slight difference that I wanted to take in effect with mine. Scrollbar is the 100% of the height, not just the content.
    I know it might seem illogical and weird but it's what I am trying to do.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,725
    Thanks
    46
    Thanked 214 Times in 207 Posts
    Blog Entries
    52

    Default

    Quote Originally Posted by Deadweight View Post
    Scrollbar is the 100% of the height, not just the content.
    Sorry, I didn't realize that. In that case, you can also do (I don't think you need the min-height for html,body and #content):
    Code:
    <style>
    #topbar, #mainWrapper {left:0; top: 0; right:0}
    
    #topbar {position: fixed; height: 40px; z-index: 1; background: red}
    
    #mainWrapper {position:absolute; bottom:0; padding-top: 40px}
    
    #mainWrapper, #content {background:green}
    </style>
    
    <div id="topbar"></div>
    
    <div id="mainWrapper" >
    <div id="content">
    content
    </div>
    </div>

Similar Threads

  1. Featured Content Glider toggle inside wrapper?
    By rzucco in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-21-2010, 01:45 PM
  2. Replies: 5
    Last Post: 06-26-2009, 01:47 AM
  3. Div not extending with content
    By Allyria in forum CSS
    Replies: 2
    Last Post: 09-05-2008, 11:22 PM
  4. Replies: 0
    Last Post: 07-25-2007, 02:37 AM
  5. Divs extending past Div wrapper
    By Girard Ibanez in forum CSS
    Replies: 1
    Last Post: 05-11-2007, 04:31 PM

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
  •