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

[Neil1]

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:



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)



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.



<div class="div1" tabIndex="1"></div>


Then finally adding height to the divs in the on focus state.



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?

[Beverleyh]

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.

[Neil1]

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.

[Neil1]

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.

[styxlawyer]

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

[Neil1]

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.

[styxlawyer]

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.

[dixalex]

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

[styxlawyer]

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 (http://mydesk.myzen.co.uk/SlidingPanels/test.html).

The CSS is here (http://mydesk.myzen.co.uk/SlidingPanels/body.css).

[jundo12]

you mean something like this?
http://tympanus.net/Development/FullscreenLayoutPageTransitions/

[jundo12]

found this on the net at stack overflow


#hide_element:target {
display:none;
}

.show_element:target{
display:block;
}

perhaps that would work?

its the last solution on this page. he describes how to use it
http://stackoverflow.com/questions/16308779/how-can-i-hide-show-a-div-when-a-button-is-clicked.