I have three column layout. In the third column I have two divs. First div is fixed. Second div is having minimum height of 50px. when the text content inside second div increases then its height should increase to a point where it reaches the bottom of third column and then it should show scrollbars.
So far I have applied my effort here:http://jsfiddle.net/Q2Ata/1/
I have tried to achieve this layout but when I add more text inside then the main table's height also inceases. This issue can be found in this fiddle.
http://jsfiddle.net/Q2Ata/2/
HTML code:
<div class="table">
<div class="table-cell">
<div class="column">Column 1</div>
</div>
<div class="table-cell">
<div class="column">Column 2</div>
</div>
<div class="table-cell">
<div class="column">
<div class="container">
<div class="header">
<div class="table-cell">Header</div>
</div>
<div class="content">
<div class="abc">
text content here ...
</div>
</div>
</div>
</div>
</div>
</div>
CSS Code:
.table {display:table;width:100%;height:200px;max-height:200px;table-layout:fixed}
.table-cell{display:table-cell;padding:10px;vertical-align:top}
.column{border:1px solid #000;height:100%}
.container{display:table;width:100%}
.header, .content{display:table-row}
{display:table-row}
.container .table-cell{border:1px solid #F00}
.abc{min-height:50px;padding:10px;border:1px solid #000;height:auto;overflow-y:auto}
You need to set a max-height on your element in order to have the overflow: auto working and you will have scroll bars when the maximum height has been reached.
http://jsfiddle.net/Q2Ata/4/
Related
I am trying to fit image in with text link to flexbox container. The problem that it's break my container and it's become look like next on small screen:
<el-container>
<el-main>
<div class="top">
<div class="download-compiler">
<div class="dmd-download">
<el-image src="http://dlang.ru/imgs/dmd_logo_128.png"></el-image>
<el-link style="color: black; font-size: 1.3em;">DMD</el-link>
</div>
</div>
<div class="code-snippets">
<div class="code-snippets-header">
Samples:
</div>
<div class="code-snippets-content"></div>
</div>
</div>
<div class="middle">
<div class="main-app-img">
</div>
</div>
</el-main>
</el-container>
Here is minimal jsfiddle.
https://jsfiddle.net/dhoc4zw5/
I'm not really sure what you're trying to achieve, but in your jsfiddle, just removing height: 20% from class .top make the image and text always stay in the pink zone.
I have this fiddle:
https://jsfiddle.net/qa5dr0x8/130/
I dynamically create divs, so i dont know how many will i have them and i dont know width of them. I manage to achive to have them in one line but there is a space after last div in container. What i want to to fill container with that divs even if i dont know width any of them. I would love to achive that without using flex. Any suggestion ?
<body>
<div style="widht:30%">
test text
</div>
<div style="width:70%;border:1px solid black;">
<div style="background-color:red;display:inline-block;">
a1fsdfsdfsd
</div>
<div style="background-color:yellow;display:inline-block;">
b1dfsd
</div>f
<div style="background-color:blue;display:inline-block;">
c1d
</div>
</div>
</body>
you could use display: table instead of flex for the wrapper and use display:table-cell for the variable divs.
<div style="widht:30%">
test text
</div>
<div style="width:70%;border:1px solid black; display: table">
<div style="background-color:red;display:table-cell;">
a1fsdfsdfsd
</div>
<div style="background-color:yellow;display:table-cell;">
b1dfsd
</div>
<div style="background-color:blue;display:table-cell;">
c1d
</div>
</div>
https://jsfiddle.net/qa5dr0x8/131/
<body>
<div style="width:30%">
test text
</div>
<div style="width:70%;border:1px solid black;display:inline;">
<div style="background-color:red;display:inline-block;">
a1fsdfsdfsd
</div>
<div style="background-color:yellow;display:inline-block;">
b1dfsd
</div>f
<div style="background-color:blue;display:inline-block;">
c1d
</div>
</div>
</body>
If you want all in same line without space and without using flex then you can add css display:inline; in this div
<div style="width:70%;border:1px solid black;display:inline;">
I need a CSS design that has three rows and fills the entire screen. The second row has three columns. Each column has three sections (top,middle,bottom). I want the last section, if it is too big, to have a scroll bar so the content doesn't flow off the page.
I have attempted this for a while but my main problem is the section I want to overflow doesn't make the scroll box, it just flows off the page. Is there a way to do this? maybe using display:flex?
Here is the basic concept of my code:
<div class="table">
<div class="header">
Header content here
</div>
<div class="content table-row">
<div class="table-col">
<div class="top-content">
</div>
<div class="middle-contnet">
</div>
<div class="bottom-contnet">
If this content is too big, then make this div an overflow-y:scroll
</div>
</div>
<div class="table-col">
<div class="top-content">
</div>
<div class="middle-contnet">
</div>
<div class="bottom-contnet">
If this content is too big, then make this div an overflow-y:scroll
</div>
</div>
<div class="table-col">
<div class="top-content">
</div>
<div class="middle-contnet">
</div>
<div class="bottom-contnet">
If this content is too big, then make this div an overflow-y:scroll
</div>
</div>
</div>
<div class="footer">
Footer content here
</div>
</div>
If you can help, please do.
Have you tried adding an additional class to the row so you can have a overflow class and apply it to only the specific row?
.overflow: overflow-y: scroll;
<div class="bottom-contnet overflow">
If this content is too big, then make this div an overflow-y:scroll
</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 the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>