I have two flex columns with some content. I want the first column height to always be equal to the height of the second column, and use overflow: auto if it has more content than the other column. One important note is that I don't want to use absolute positioning. Below is what I am after:
.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
}
.content-1 {
height: 500px;
background-color: green;
}
.content-2 {
height: 150px;
background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="cover">
<div class="content-1"></div>
</div>
</div>
<div class="col">
<div class="content-2"></div>
</div>
</div>
</div>
Is there a way to achieve the same without the absolutely positioned element nested in the first col? Thanks in advance.
Here is an idea I used in a previous question where you can rely on the min-height:100%;height:0; trick. The height:0 will force the element to not affect the height of the container and min-height:100% will force it to be equal to the height defined by the sibling element:
.cover {
height:0;
min-height: 100%;
overflow-y: auto;
}
.content-1 {
height: 500px;
background-color: green;
}
.content-2 {
height: 150px;
background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="cover">
<div class="content-1"></div>
</div>
</div>
<div class="col">
<div class="content-2"></div>
</div>
</div>
</div>
Related
I want to position a div according to the picture:
I'm successful so far by using Bootstrap's row class and using z-index in my CSS. But when I resize the browser, it's not responsive, it just floats off the right side of the page. By the way, I'm using position: absolute (I read online that I have to use this in order to make use of z-index). Is there any other more elegant way to do this? I want it to be responsive but can't seem to find any other workaround than the wonky one I implemented.
Code:
#div2 {
float: inherit;
position: absolute;
top: inherit;
left: 60%;
width: 320px;
height: 1290px;
z-index: 5;
}
<div class="container">
<div class="div-container">
<div class="row">
<div id="div1">
<p>Div 1</p>
</div>
<div id="div2" align='center'>
<p>Div 2</p>
</div>
</div>
<div class="row">
<div id="div3">
<p>Div 3</p>
</div>
</div>
</div>
</div>
You need to make use of the nested rows inside a column. See here - Bootstrap Nesting. Ignore the CSS here as it is for snippet styling and height is used for ignoring the content.
.B {
min-height: 130px;
background: #393276;
margin-bottom: 20px;
}
.A {
min-height: 100px;
margin-bottom: 20px;
background: #393276;
}
.C {
min-height: 250px;
background: #393276;
}
div {
text-align: center;
color: #fff;
font-size: 32px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container mt-4">
<div class="row">
<!-- First Column -->
<div class="col-sm-6">
<!--Rows nested inside a column-->
<div class="row">
<div class="col-12">
<div class="A">A</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="B">B</div>
</div>
</div>
</div>
<!-- Second Column -->
<div class="col-sm-6">
<div class="C">C</div>
</div>
</div>
</div>
I have used flexbox to keep responsive design and some margin positioning to keep the formation together.
.container{
display: flex;
flex-wrap: wrap;
width: 150px;
}
.div1, .div3{
margin-right: 5px;
width: 50px;
height: 50px;
}
.div2{
margin-right: 5px;
width: 50px;
height: 110px;
}
<div class="container">
<div class="div1"> div1 </div>
<div class="div2"> div2 </div>
<br/>
<div class="div3" style="margin-top: -55px;"> div 3 </div>
</div>
I need to display each div without any overlaps, the main div is using bootstrap col-*, this same div contains other divs with absolute position, I need to be clear that I cannot altern the height and the width of any div outside .element divs (which means width, height of 100% or auto can still be used).
Here's the fiddle : https://jsfiddle.net/Lmt1u1uw/6/
.layout {
position: relative;
}
.element,
.elements {
position: absolute;
}
.layout-1 .background {
background: #4dadc9;
width: 600px;
height: 400px;
}
.layout-1 .text {
transform: translate(30px, 60px);
color: #ffffff;
width: 200px;
}
.layout-2 .background {
background: red;
width: 600px;
height: 400px;
}
.layout-2 .text {
transform: translate(170px, 200px);
color: #ffffff;
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="region col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="layout layout-1">
<div class="elements">
<div class="element background"></div>
<div class="element text">Magic soak into my spine.</div>
</div>
</div>
</div>
<div class="region col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="layout layout-2">
<div class="elements">
<div class="element background"></div>
<div class="element text">The dreams maker gonna make you mad.</div>
</div>
</div>
</div>
As you can see in the snippet the two .region are on top of each other on responsive and shouldn't overlap, how can I fix this ?
The two .elements need to be display:block and have a specified width/height in order to float around each other:
have a look a my fiddle here:
https://jsfiddle.net/Lmt1u1uw/7/
This should do the trick.
I would like to create a simple popover that displays in place (think about a combobox list below a button). The popover should display over existing elements, i.e. not pre allocate space.
There are many examples using `position: relative -> overflow: hidden -> position: absolute' hierarchy and the work until the popover flows off the bottom of the container, in which case its size affect the parent container and creates a scroll.
Here is a codepen sample. What I'm trying to get is to have no scroll on the rightmost column.
<div class="main">
<div class="column">
<h2>no overflow</h2>
<div class="tall">x</div>
<div class="tall">x</div>
</div>
<div class="column">
<h2>basic overflow</h2>
<div class="tall">x</div>
<div class="tall">x</div>
<div class="tall">x</div>
</div>
<div class="column">
<h2>popover without overflow</h2>
<div class="tall">x</div>
<div class="overlay">
popover should be vislble below
<div class="overflow">
<div class="absolute short">
z
</div>
</div>
</div>
<div class="tall">x</div>
</div>
<div class="column">
<h2>popover with overflow</h2>
<div class="tall">x</div>
<div class="overlay">
popover should be vislble below
<div class="overflow">
<div class="absolute">
z
</div>
</div>
</div>
<div class="tall">x</div>
</div>
</div>
and the scss file:
html, body {
height: 95%;
}
.main {
display: flex;
flex-direction: row;
border: 2px solid red;
height: 100%;
.column {
margin-left: 20px;
height: 100%;
flex: 1;
border: 1px solid black;
overflow-y: auto;
.tall {
height: 300px;
border: 1px solid blue;
}
.overlay {
position: relative;
.overflow {
background: #F00;
overflow: hidden;
.absolute {
opacity: 0.5;
width: 100%;
height: 600px;
position: absolute;
background: #FF0;
&.short {
height: 200px;
}
}
}
}
}
}
I think (if I'm clear about the question) that this issue can be pretty easily resolved by simply substituting the height of your tall class with min-height and max-height If you set the min-height equal to the short height then the popover shouldn't overflow.
I made my own codepen do demonstrate (i adjusted the popover to 100 in height and set the min-height also to 100 for demo) . The code is the same as the code you posted except for the height in the .short class and min-/max-heights in the .tall class. I added overflow:hidden; to the short class in the event that the the height of the content in the popover being greater than the height assigned.
I have commented out the columns with no popovers but feel free to comment them in.
Hope this helps
How can I align div element at the bottom of parent element while using bootstrap col?
.wrapper {
background-color: green;
height: 200px;
}
.bottom {
position: relative;
}
.bottom-div {
height: 200px;
position: absolute;
bottom: 0;
}
<div class="wrapper">
<div class="col-md-3 bottom">
<div class="bottom-div"> TEST1 </div>
</div>
<div class="col-md-6">
TEST2
</div>
<div class="col-md-3">
TEST3
</div>
</div>
bottom div element does not align at bottom. What is correct way of doing this? Thanks.
UPDATE: Div element runs out of wrapper (it basically moves up)
Not sure exactly what you're trying to do, as #CBroe said flexbox would be the best way but try this:-
/* CSS used here will be applied after bootstrap.css */
.wrapper{
background-color:green;
height: 200px;
position: relative;
}
.bottom-div{
height: 50px;
width: 50px;
position: absolute;
bottom:0;
left: 0;
background-color: red;
}
.testclass {
height: 100%;
}
<div class="wrapper">
<div class="col-md-3 testclass">
<div class="bottom-div"> TEST1 </div>
</div>
<div class="col-md-6">
TEST2
</div>
<div class="col-md-3">
TEST3
</div>
</div>
I am just trying to create a basic website using Material Design Light that responds to the size of the screen and I am having trouble making the grid fill all of the available height. I have tried to look for solutions to this problem online but I cant find any that work.
Here is the source code for one the grids I will use:
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
</div>
</main>
Here is a link to the full Html page: Example MDL Page
Here is an image of the problem: Page Example
I'm assuming that your page height is the view height, which you can only use w/ modern browsers. See view height
Basically what we're doing here is we already know how high our footer and header are going to be (in the fiddle i just set it to 50px each). Then we use the calc CSS property to set the view height (vh) to 100% - 100px (meaning the footer and header's height put together (50+50 = 100)
Check the fiddle
<div id="main-body">
<div class="header"></div>
<div class="content clearfix">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
</div>
<div class="footer"></div>
</div>
* {
box-sizing: border-box; /* add for browser prefixes */
}
#main-body {
height: 100%;
overflow: hidden;
}
.header, .footer {
background-color: blue;
height: 50px;
}
.content .a {
height: calc(100vh - 100px);
background-color: red;
width: 25%;
float: left;
}
.clearfix:after {
content: "";
clear:both;
display:table;
}
Note that you'll also need the viewport meta tag in your <head> for this to work.
<meta name="viewport" content="width=device-width, initial-scale=1">
OP added the he would like the ability to center the text within these content divs
<div id="main-body">
<div class="header"></div>
<div class="content clearfix">
<div class="a"><p>1</p></div>
<div class="a"><p>2</p></div>
<div class="a"><p>3</p></div>
<div class="a"><p>4</p></div>
</div>
<div class="footer"></div>
</div>
#main-body {
height: 100%;
overflow: hidden;
}
.header, .footer {
background-color: blue;
height: 50px;
}
.content .a {
height: calc(100vh - 100px);
background-color: red;
width: 25%;
float: left;
position: relative;
}
.content .a p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.clearfix:after {
content: "";
clear:both;
display:table;
}
Th way I did it was to over-ride a couple of the mdl styles, notably to make main display as flex rather than inline-block. It would probably make sense to add an Id to restrict the impact of this override across the rest of your site
.mdl-layout__content {
display: flex;
flex-direction: column;
.mdl-grid {
width: 100%;
flex-grow: 2;
}
}
Try to fool around with the CSS height attribute. Like so:
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray; height:100%;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray; height:100%;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray; height:100%;">size 4</div>
More information here: http://www.w3schools.com/cssref/pr_dim_height.asp