I have a div containing a textarea element.
And I need to give it the right vertical size.
The container Div have right size. (100%)
I want to give a min-height or min rows, to provide a scroll if necessary, and a height of 100% (the 100 % of div).
I can't. I don't know how to do this. I need an example.
The very basic example is
<html>
<body>
<div style="height:100%;border:1px solid green;">
<textarea style="min-height:100px;height:100%;width:100%;border:1px solid red;"></textarea>
</div>
</body>
Borders are only to show dimensions. But in your case it might be more complicated. Please look at the definition of a containing block and height calculation.
Related
I have a containing div that is constrained in its height and width. It has 2 child elements.
The first child can be of variable height (as the text within it can wrap, and this is desired behavior).
The second child is a div wrapping a table. The div is set to overflow-y: scroll, so it is meant to fill the remaining height of its container, and provide scrolling for the rest of its inner table when it doesn't completely fit.
Here's a simple view of the structure:
<div id="container" style="height:300px; width:200px">
<div id="headerArea">
...
</div>
<div id="scrollingTable" style="overflow-y:scroll">
<table>
...
</table>
</div>
</div>
Despite my tinkering, I can never get the second child, the scrollingTable div, to constrain itself to the limits provided by the container. Using height:100% doesn't FILL the remaining container height, but sets the height to the container's exact height (300px), which is too much because the headerArea takes up space too.
If the height of the headerArea was fixed, I could specify the scrollingTable's size as 300 - heightOfHeaderArea, but as mentioned above the headerArea's height is NOT fixed.
I'm likely going to have to use JQuery to resize the scrollingTable to the specified height, but I am curious if there is a pure css solution.
Any suggestions, or is this impossible without fixing the headerArea's height?
You can't do this with css alone. You have to give the scrolling div a height for it to be able to scroll (100% or fixed value).
http://jsfiddle.net/tUrTu/
This can be achieved though with javascript :
http://jsfiddle.net/tUrTu/2/
Hope it helps.
If you set the scrollTable to 100% it will inherit the 300px from the container div and go outside of the container div regardless of the fixed height you set to headerArea
You shall use Javascript to dynamically generate the height, but beware the sequence of the code must be HTML -> Javascript -> CSS.
code:
<div id="container" style="height:300px; width:200px">
<div id="headerArea">
...
</div>
<div id="scrollingTable">
<table>
...
</table>
</div>
</div>
<script language="javascript">
var headerh = document.getElementById('headerArea').offsetHeight;
document.getElementById('scrollingTable').style.height = (300 - headerh) + 'px';
</script>
<style type="text/css">
#container {
height: 300px;
}
#headerArea {
}
#scrollingTable {a
overflow-y: scroll;
}
</style>
How to split screen with three divs by following demands:
- main div should cover whole screen (100%x100%)
- sub div after div should cover main div( each sub div = 33% )
I tried to do it as following :
<div style="width:100%; height :100%; background-color:Lime;">
sss
<div style="width:100%; height:34%; background-color:Blue;">
a
</div>
<div style="width:100%; height:33%; background-color:Gray;">
b
</div>
<div style="width:100%; height:33%; background-color:Aqua;">
c
</div>
</div>
You need to set height of body and html to 100%. See this fiddle.
I think your main source of confusion is that your 'main' div is only going to take up as much space as it needs to satisfy the style requirements. It will take 100% of the size of the parent element, but if that size is not defined, it only grows to the minimum size required by whatever it contains.
In this fiddle, I just wrapped your code in a div defined to be 200px high, and it seems to work fine (however, note that the 100% is actually diminished by the fact that 'sss' is included in the main div, before the contained divs).
If you want to remove the white margin, set the style to "margin:0" on the body tag.
Use the display: flex and make sure to set 33% as your width for each, that way you make sure that the three of them occupy 1/3 of the screen
I have a few floating div elements that are floating left. They all have a height of 100%. One of the divs exceeds the height of the view port and the other DIVs do not resize to 100% of the parent DIV which has a position of relative set (which is how it should work in my oppinion).
Except the display table, table-row, table-cell solution, is there any other way of making all divs 100% of the viewport and if one needs to be higher, make the others stretch to 100% of the parent div that got stretched by the increased div.
How? :)
Thank you.
Correct me if I'm wrong but it seems that you want equal height floated columns. The explanation to this can be quite involved so I'll point you to a few examples.
Try
http://thelucid.com/2010/12/03/the-solution-to-fluid-inconsistencies-and-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I don't follow your question completely. Have a look at this code:
<html>
<body>
<div style="height:50px;position:relative">
<div style="background-color:red; float:right; height:100%">moo</div>
<div style="background-color:green; float:right; height:100%">boo<br/>coo<br/>doo<br/>goo<br/>boo<br/>coo<br/>doo<br/>goo</div>
<div style="background-color:blue; float:right; height:100%">foo</div>
</div>
</body>
</html>
As you can see, the center DIV is has height of more than 50px, so the the outer DIV (with the relative position") is stretched, along with the other inner-DIVs.
Doesn't this work for you?
I can't get my head around this but with the basic div containing an inner div if you remove the border style from either of the div element then the height of the overall box is affected?!?
Can someone explain this for me please?
<div style="background-color:red;border:1px solid black;">
<div style="margin:10px;background-color:blue;border:1px solid black;">
<p style="margin:30px;background-color:gray;border:1px solid black;">test</p>
</div>
</div>
Can you guys simulate this? does the height change if you remove the border styles?
Hope someone can shed some light on this
Many thanks!
The height (and width) is determined by the total of the css width, height (or width), margin and padding. It's call The CSS Box Model and W3Schools has a detailed explanation.
When you add a border it adds whatever number of pixels you specify to the outside of the element, so in that sense it will change the height of your element.
It will then affect the height of the div that it is in if it does not have a fixed height.
Hope this helps some.
I found if I specify div with only width CSS attribute, the div will not occupy the width I claimed, see:
<div style="width: 300px;">
</div>
It will never occupy 300px space.
Is it possible that I want an empty DIV occupies 300px width?
You either need to add content or set a height. Otherwise an empty div will not appear because its height is determined by its contents.
See Example
You need to specify something or a space to achieve that:
<div style="width:300px; border:1px solid black;"> </div>
The border was given to show width but you can remove it.
height must be specified in order to make it visible.