There is no height specified for body tag but why is it taking some amount of height when I see in inspect element?
here is the code
http://jsfiddle.net/9TzEC/3/
And here is the example screen
Look to the left of the jsFiddle screen, uncheck "Normalized CSS"
http://jsfiddle.net/Kyle_Sevenoaks/LwBLH/1/
#Sowmya every block tag/element having auto height, If content will increase apparently element height will increase , less content=less height, large content= long height !!
I got the solution. That was happening because of the table added inside the "content_wrap" div. this is was not considering the table inside it so I added a blank div around the table then it is working as child of the div "content_wrap".
Updated fiddle http://jsfiddle.net/9TzEC/7/
add this css to the end of css file
.content_wrap {overflow:auto;}
this is because of the floating table in this div. if you need I will explain it in detail just ask ;)
Related
I am making a header component and what I want to achieve is to make my header picture stretch to the full width of the webpage, even when it the browser shrinks, however when you shrink the browser the picture does not stretch 100% and is driving me insane. I don't want to remove the scroll-x property, so how can I fix this? What am I doing wrong? Here is is a picture of my issue:
https://imgur.com/YCZOYGE
And here is a codepen with my code:
https://jsfiddle.net/philipkovachev9/ax2Ljtvn/5/
So, as promised I found a solution.
Change display:flex from your parent div, to display: inline-block and remove width:100%. You div will have the size of your content, even when it overflows.
Setting the width to 100% will be relative to the parent, it was the body. However, the body didn't include the overflow.
I hope it works :)
PS: If you still need display:flex, create a child div, with flex attribute.
add this css
body{padding:0;margin:0}
My HTML page is divided into two sections:
LEFT : there is a table
RIGHT: there is a div including its text
I want that the table would be high like the div, and it should adjust automatically when the div's height changes.
(I tried it in CSS: body, html, table {height:100%}, but this is not what I want).
PS:
The div arrives at the bottom of the page, so I can adapt the table at the height of the page.
Can someone please help me to do this?
i think that, you can try use variable in css, and then substitute it for table height and div. I don't know exactly what, you mean.
PS. maybe you should use this selector: table, div { min-height: ... ;}
If you're talking about having equal heights on both columns, this can easily be achieved with Flexbox.
Check this page out
https://davidwalsh.name/flexbox-column
I'm curious what is the purpose of html, body{width:100%} in the css file? Is it kind of css reset code?
Disabling this piece of code doesn't affect on what I see in the browser. Is it a "bugfix" for some old browser or for mobile devices? Am I missing something?
Could anybody please explain?
Thank you.
As far as I know, width:100% is used when you want a block-level element to fill any remaining space inside it's parent or when an element is inheriting a set width value that you want to override. But in most cases it is unnecessary or will bring undesirable results.
As far I know it's not necessary maximum time, some time not mentioning this is creates problem with IE browser by improper formatting of the content. otherwise there is no need.
Understand it this way.
HTML is parent of BODY.
BODY is parent of the content.
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set.And since the content of body will probably need to change dynamically. Setting min-height of the body to 100% makes that happen.
If we are using overflow:hidden with body and the body isn't able to take the height of dynamic content then the part outside the body height won't be visible .
Now the question is
When doesn't the body take the height of the dynamic content ?
When we are using floating elements .The height of the floating elements are not calculated by the parent until we use overflow:auto.
I have the following structure:
http://jsfiddle.net/poztin/q9v9j/10/
I'm trying to get the fieldsets to vertically fill their parent table cells.
My understanding is that in order for the fieldset to have height 100% I need to set a fixed height on it's parent.
However the content within each fieldset is generated dynamically, therefore I cannot set a fixed height.
The above jsFiddle works in Chrome, but not IE.
How can I achieve this in IE? I'd prefer a css solution but would also welcome jQuery suggestions.
You have put the td height as 1px. I removed it.
Is this what you are looking for? http://jsfiddle.net/q9v9j/13/
The main element "table" has to have height:100%, then it magically works.
See here:
http://jsfiddle.net/luissanchezm86/nGCdx/13/
i made myself a Speed Dial-like homepage with links I visit the most.
Now, i made it elastic, so when browser window is narrowed horizontally, the boxes getting narrower too.
What I want is that when browser window is narrowed vertically, that boxes get narrower again.
I tried with several percentage height rules but it didn't work, need help.
Here is the page I'm working on its one-file page so CSS is not separated.
http://www.purplerspace.com/dl/
You have to add the height percentages to almost all the divs if you want it to work. Add height: 100% to html, body then the wrappers and also the lis and yeah, the a style too.
Don't know if it's optimal but tables for this should work. Set the table height and width to 100%. And don't forget to set your html and wrapper tag to 100% in height.