Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Force div height to 0 regardless of content, without using overflow:hidden.

  1. #1
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default Force div height to 0 regardless of content, without using overflow:hidden.

    I am, just out of curiousity, trying to build a functional interactive website purely with CSS and a single page of html. This is purely for my own experimentation and education not for practical implementation so if it can't be done I don't need JS etc. workarounds, just a simple "No".

    To give a multi-page look with navigation options I have a series of divs styled as follows:

    Code:
        div1{
        position:absolute;
        top:10px;
        left:10px;
        width:calc(100% - 140px);
        height:0;
        }
    They are all positioned exactly the same so they occupy the same area, but (If I could get it to work!) don't show up as they have zero height.

    Then I am giving them all before and after pseudo elements positioned outside the div in the space remaining to the right, (Will just show before as after overlays before to create a 3D button)

    Code:
        div1::before{
        content:"";
        position:absolute;
        top:0px;
        left:calc(100% + 20px);
        width:100px
        height:100px;
        cursor:pointer;
        }
    Again all the same for each div, except for the top: which increases in increments of 110px the they form a column of buttons down the right hand side of the page.

    Next in the html I am giving each div a tab index so :focus{ can be used.

    Code:
        <div class="div1" tabIndex="1"></div>
    Then finally adding height to the divs in the on focus state.

    Code:
        div1:focus{
        position:absolute;
        top:10px;
        left:10px;
        width:calc(100% - 140px);
        height:calc(100% - 20px);
        }
    With additional styling not listed for simplicity, eg transitions on everything and :hover / :focus effects on the psuedo elements the buttons look like links, light up on hover, and start looking like they stick up and like they are clicked down while focused. When all the content divs are empty, just using background colours / borders for the purpose of test it works fine with the div relating to whichever button is clicked sliding down from the top and sliding back up to be replaced with another when the next is clicked.

    However as soon as I add content to any of the divs they expand to fit it in the 0 height state, height:0 and max-height:0 both get overridden, and anything like overflow:hidden or Opacity:0 also effect the psuedo elements and the 'buttons' disappear.

    So what I am trying to find out is, is there anyway of forcing the height to remain at zero unless in focus so the divs contents are hidden, or any other way of making the content 'invisible' out of focus state, but without effecting ::before and ::after pseudo elements?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    It's hard to visualise what you're trying to do from the description. Please can you post a page/demo so we can see first hand.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    Neil1 (06-01-2015)

  4. #3
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    I'm at work at the moment and what I have so far is on my home computer, will upload it and link to demo when I get home.

  5. #4
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    Oops forget last message, I just remembered I have it on a memory stick so have uploaded now (condensed version without images etc. but should show what I am trying to achieve and what is going wrong)...

    http://www.pleasted.co.uk/test1.htm has all divs empty and a different background colour added to each just to show what I am trying to achieve.

    http://www.pleasted.co.uk/test2.htm has content added to the first div, however it renders outside the div and shows on the screen regardless of which div is selected. What I am trying to acheive is for the div to have zero height thus hiding this content until the div is in focus and the height expands.

    http://www.pleasted.co.uk/body.css is my css.

  6. #5
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    The content is overflowing the div when it has zero height. If you add "overflow:hidden;" to your css the problem should go away.

  7. The Following User Says Thank You to styxlawyer For This Useful Post:

    Neil1 (06-01-2015)

  8. #6
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    Unfortunately I can't just add overflow:hidden as I have pseudo elements of the div outside the div which I want to keep in view, and hiding overflow also hides these, so I need a way of forcing the height not to expand without using overflow hidden... or a way of forcing pseudo elements to ignore overflow:hidden.

  9. #7
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    If the pseudo elements are children with their own CSS, you could also add "overflow:visible;" to them. That would override the "overflow:hidden;" of the parent element.

  10. The Following User Says Thank You to styxlawyer For This Useful Post:

    Neil1 (06-01-2015)

  11. #8
    Join Date
    Jun 2015
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Neil1 View Post
    Oops forget last message, I just remembered I have it on a memory stick so have uploaded now (condensed version without images etc. but should show what I am trying to achieve and what is going wrong)...

    http://www.pleasted.co.uk/test1.htm has all divs empty and a different background colour added to each just to show what I am trying to achieve.

    http://www.pleasted.co.uk/test2.htm has content added to the first div, however it renders outside the div and shows on the screen regardless of which div is selected. What I am trying to acheive is for the div to have zero height thus hiding this content until the div is in focus and the height expands.

    http://www.pleasted.co.uk/body.css is my css.
    Hi Neil, this concept that you have of a one page, multiple page is very solid. It is one that I always thought possible but you have put it in realization. With some jQuery, it would definitely be a good model to offer people as a service- a template of sorts. May I please utilize your concept?

    Regarding your specific issue, you may want to try to zero in on the active hover state of the object and make it visibility hidden or display none, but when active to make visibility visible and display block.

    Let me know either way.

    Thank you,
    Alex

  12. #9
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    I've been experimenting with "z-index" and "visibility" but without success. However I have added text to all the divs and the results are interesting.

    Have a look here.

    The CSS is here.

  13. #10
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

Similar Threads

  1. Overflow: hidden .... ah, really???
    By suction cup in forum CSS
    Replies: 1
    Last Post: 01-05-2011, 04:14 PM
  2. Replies: 0
    Last Post: 03-05-2010, 08:01 AM
  3. Replies: 2
    Last Post: 03-06-2009, 10:12 PM
  4. Replies: 9
    Last Post: 11-18-2008, 09:31 AM
  5. Overflow hidden not hiding in IE...
    By J Garside in forum CSS
    Replies: 0
    Last Post: 09-05-2006, 02:23 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
  •