is there a way for 'fill' to fill by its height remaining space without using JS?
<div id="all" style="height: 30%">
<div id="ukn" style="height: unknown"></div>
<div id="fill"></div>
</div>
Simply place the unknown div inside the #fill div and set its height to 100%.
<div style="height:30%;">
<div id="fill" style="height:100%;">
<div style="height:_unknown_;"></div>
</div>
</div>
#fill{
min-height: 250px;
}
You may need to change the pixels to the height you would like.
Related
I am creating a basic text reverser on https://shinkarom.github.io/reverser/ (the source code is https://github.com/shinkarom/reverser). For CSS framework I am using http://mincss.com.
The reverser is split into two columns. The left one has the textarea. The right one has the reversed text.
Unfortunately, the textarea is too small and doesn't fill the whole column. Giving it width: 100%;height: 100%; box-sizing:border-box solved the width problem, but the height is still too small.
As a workaround, I tried to give the textarea 25 rows, but it looked very ugly on a smaller browser window.
Here's the relevant code:
<div class="row">
<div class="col c6">
<textarea id="text" class="smooth" style="width: 100%;height: 100%;
box-sizing:border-box;resize:none"></textarea>
</div>
<div class="col c6">
<div id="result"> </div>
</div>
</div>
How to make the textarea fill the whole height?
put height:100vh instead of 100% if you want the textarea to take full height of page. height:100% can't be applied unless your parent div has specified static height.
<div class="row">
<div class="col c6">
<textarea id="text" class="smooth" style="width: 100%;height: 100vh;
box-sizing:border-box;resize:none"></textarea>
</div>
<div class="col c6">
<div id="result"> </div>
</div>
</div>
I am wondering how I can make a column in bootstrap to be full page height no matter what. I have currently tried making an id and setting the height to 100%, but I have had no luck.
<div id="main-row" class="row">
<div id="left" class="col-lg-3">
TEXT
</div>
<div id="center" class="col-lg-3">
TEXT
</div>
<div id="right" class="col-lg-3">
TEXT
</div>
This is an example of what I have tried. All I want to achieve is to set the entire column to be the entire height of the page. It currently locks to content height. Is there any way around this?
You will need to use CSS to set the height.
First, you need your body to be 100%. Then I would put the columns in a containing div and set that to be 100% (looks like main-row is the containing div). Then if you want only select columns to extend to the full height, give them an class that has 100% set as height.
You can try setting the css to this.
.html, body {
height:100%;
}
#main-row {
height:100%;
}
.fullheightcol {
height: 100%;
}
HTML:
<div id="main-row" class="row">
<div id="left" class="col-lg-3">
TEXT
</div>
<div id="center" class="col-lg-6 fullheightcol">
TEXT
</div>
<div id="right" class="col-lg-3">
TEXT
</div>
</div>
I want to create grid view, where header contains 10% height of the page and body 90%.
I have tried to adjust this, but body part does not grow when element section on right hand scales.
I want to add elements in right panel in responsive manner.
Is there any good way to organize this?
fiddle: http://jsfiddle.net/karimkhan/q18yzkoz/5/
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="background-color:lavender;">
<div class="header">Header Height should be 10% of the page</div>
</div>
</div>
<div class="row" >
<div class="col-xs-8" style="background-color:lavenderblush; height:100%">Body, Height should be 90% of th page
</div>
<div class="col-xs-4" style="background-color:lavender;">
<!-- 12 repeated rows as below, height should fit in 90% region in responsive manner -->
<div class="row" >
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item1</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item2</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item3</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item4</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item5</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item6</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item7</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item8</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item9</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item10</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item11</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item12</div>
</div>
</div>
</div>
</div>
</body>
You have a ton of divs that you're not actually using. ALL of those need to explicitly be set to 100% height and also have a wrapper.
Take a look at this pen: http://codepen.io/anon/pen/bdOyJp
You have a ton of nested divs. I cut the HTML down to this:
<div class="header">Header Height should be 10% of the page</div>
<div class="content row">
<div class="col-xs-8" style="background-color:lavenderblush; height:100%">
Body, Height should be 90% of th page
</div>
<div class="col-xs-4" style="background-color:lavender;">
<!-- all the items... -->
</div>
</div>
And here's what I cut the CSS down to:
html, body {
height: 100%;
}
.header {
height : 10%;
background: teal;
}
.content {
width: 100%;
height: 90%;
background: deeppink;
}
I set a background on .content so that it would fill the right column. It is a 'faux column' technique but there are many more.
Neither the BODY (.col-xs-8) or the HEADER (.header) heights in your code are being recognized. Hence, not only is the body not 90%, but the header is not 10%. The height of the header is simply the height of the content. You can plug in other percentage values and you'll see nothing changes.
This is caused by the multitude of nested containers and various assigned heights in your code, which is a bit confusing and convoluted. However, your mark-up doesn't have to change to accomplish your goal.
Below are my adjustments to your code. I've used inline styles. Eventually, you may want to move these styles to your external stylesheet which may be better for clarity, convenience and maintenance, but I've used inline styles here for demonstration purposes.
First, add a 100% height to your primary div container:
<div class="container-fluid" style="height: 100%;">
Second, add a 10% height to your header row and include the inline styles from the child div.
<div class="row" style="height: 10%; background-color:lavender;">
<div class="col-xs-12" //DELETE THIS: style="background-color:lavender;"//>
Third, add a 90% height to your body row and and include the inline styles from the child div.
<div class="row" style="height: 90%; background-color: lavenderblush;">
<div class="col-xs-8" //DELETE THIS: style="background-color:lavenderblush; height:100%"//>
This does the trick. I gives you 10% for the height and 90% for the body.
http://jsfiddle.net/q18yzkoz/6/
Just keep in mind that the 90% is relative to the parent container (.container-fluid) with height 100%, which is relative to the HTML/BODY height 100%. So it extends all the way down to the bottom of the page (which is what your questions asks).
However, if you want the body div to match the right column, adjust the height value of the body row from 90% to ~55%.
http://jsfiddle.net/q18yzkoz/8/
OR, you can reduce the height value of the parent container (.container-fluid) to, let's say, 70%, and work from there.
Lastly, you stated in your question:
Is there any good way to organize this?
There are other ways to create a responsive grid layout that may be more efficient and robust. Here are four methods you may want to consider:
Easy Responsive CSS Grid Layouts
Hope this helps. If you have any questions leave a comment below.
I have this html
<div class="portlet-header" style="width: 447px">
<h3>Total Calls Statuses</h3>
</div>
<div id="vertical-chart-total-calls-statuses" class="chart-holder">
<canvas class="overlay" width="478" height="300"></canvas>
</div>
</div>
<div class="portlet" style="background-color:green; float:right; ">
<div class="portlet-header" style="width: 447px">
<h3>Inbound</h3>
</div>
<div id="vertical-chart" class="chart-holder">
<canvas class="overlay" width="478" height="300"></canvas>
</div>
</div>
I don't have any CSS, but I do have HTML. Here is the current result of my code:
http://i.stack.imgur.com/mFEO3.png
I need the green div to be side by side with the red one, how do I do this?
Here’s a JSFiddle:
http://jsfiddle.net/Tn58S/
Put all the content within a container DIV with a width sufficient to hold both portlet DIVs, i.e. with a width of 956px as each of your portlet DIVS contains a CANVAS with a width of 478px. So:
<div style="width: 956px"><!-- your content here --></div>
See this jsfiddle example
After checking the full code provided in your jsfiddle, I recommend the following changes:
chartsclass needs to be wide enough to contain its content, which is 958px. So add a max-width of 958px to this class.
As you have also set chartsclass to a width of 80%, this means that the width of contentArea, which contains chartsclass and informationClass, needs to be a minimum of 1198px, as 958 is 80% of 1198.
As informationClass is set to 20%, it needs to be set to a maximum width of 240px.
As the logoArea needs to be a width of 100%, remove the float: left so that it remains as a block level element.
I've updated your jsfiddle
Just change
<div class="portlet" style="background-color:green; float:right; ">
to
<div class="portlet" style="background-color:green; float:left; ">
and make sure to resize the window to make room for both divs.
Set the widths of the main divs to be 50%
http://jsfiddle.net/yaHwj/
width:50%
Is it possible to do this with CSS? Given the following HTML:
<div class="main-container">
<div class="left">
...
</div>
<div class="right">
<div class="top">
...
</div>
<div class="bottom">
dynamic content
</div>
</div>
</div>
I want bottom to scroll if it overflows the space between top and the bottom of main-container.
How can this be done without specifying the height of bottom?
I would prefer not to specify height on other elements either if possible. It doesn't right now, but top could have dynamic content as well.
The HTML above can change however necessary; what I require is the end result of a left column, a right column, and the bottom portion of the right column scrolling if its context exceeds the available space in the main container.
In the end, you'll have to specify some kind of limits (either height or max-height) to your elements in order to know if the content goes beyond them.
Once you have those dimensions set up, overflow:auto; will show you scrollbars when you need them.
Hope this is what you are looking for:
<div class="main-container">
<div class="left" style="float: left; width:33%">
...
</div>
<div class="right" style="float: right; width:66%">
<div class="top" style="height: auto;">
...
</div>
<div class="bottom" style="max-height: {height of main-cont.}; overflow-y: scroll;">
dynamic content
</div>
</div>
</div>