I am using bootstrap 4.5 but this is just a quick example of what i want.
I have a card with some fixed width and height, I want content to take over all the remaining space while the button is always on the bottom. How can I achieve this?
<html>
<body>
<div style="width:400px; height:704px; background-color:gray;">
<div class="container" style="width:100%; height:100%;">
Some content
<button>Some Button</button>
</div>
</div>
</body>
</html>
Try something like,
position:absolute will absolutely position an element within a parent div.
.bttn {
position: absolute;
right: 50%;
bottom: 0;
}
.cont {
position: relative;
}<html>
<body>
<div style="width:400px; height:154px; background-color:gray;">
<div class="container cont" style="width:100%; height:100%;">
Some content
<button class="bttn">Some Button</button>
</div>
</div>
</body>
</html>
Do something like this (quoting the right answer of the post):
"But because the inner div is positioned absolutely, you'll always have to worry about other content in the outer div overlapping it (and you'll always have to set fixed heights).
If you can do it, it's better to make that inner div the last DOM object in your outer div and have it set to "clear: both"."
<div style="position: relative;
width: 200px;
height: 150px;
border: 1px solid black;">
<div style="position: absolute;
bottom: 0;
width: 100%;
height: 50px;
border: 1px solid red;">
</div>
</div>
Reference: How can I send an inner <div> to the bottom of its parent <div>?
For you it could be like this:
<div class="container" style="width:100%; height:100%; position: relative;">
Some content
<div class="button" style="position: absolute; bottom: 0;"><button>Some Button</button></div>
</div>
In Bootstrap, you can simply achieve it using bootstrap classes as follows -
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<body>
<div class="card text-center" style="width:400px; height:704px; background-color:gray;">
<div class="card-header">Header</div>
<div class="card-body" style="width:100%; height:100%;">Content</div>
<!-- The below button always stays at the bottom-->
<div class="card-footer"><button class="btn btn-success">Some Button</button></div>
</div>
</body>That's the way you can do using Bootstrap classes. But if you were looking for an answer to do it in simple HTML, CSS, here's a simple way -
<div class="card" style="width:400px; height:704px; background-color:gray; text-align:center;">
<div>Header</div>
<!-- Here you need to leave some height for the button -->
<div style="width:100%; height:90%;">Content</div>
<div><button>Some Button</button></div>
</div>
CSS Flexbox has a quick and easy to implement solution to this. What you can do is set the parent container to display: flex, change the direction of the content to column (display flex initially sets flex-direction to row), then align the items to "space-between" which means the child elements will be placed at the start and end of the container. This way, your content will always be at the start and your button will be at the bottom.
<html>
<body>
<div style="width:400px; height:704px; background-color:gray;">
<div class="container" style="display: flex; flex-direction: column; justify-content: space-between; width:100%; height:100%;">
Some content
<button style="width: 100px">Some Button</button>
</div>
</div>
</body>
</html>
Usually, your webpage is only as large as its content, even if the browser window is larger. You can override that:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
However, the part where you want one element to take up "all remaining space" is tricky. You have two options here: table layout or flex layout. Here's the table layout way:
body {
display: table;
}
.container {
display: table-row;
height: 100%;
}
(I've only used vanilla CSS here, not Bootstrap.)
jsFiddle: https://jsfiddle.net/89rxtfuw/
You can put content in another div and use CSS flexbox to do this
HTML:
<div style="width:400px; height:704px; background-color:gray;">
<div class="container my-container" style="width:100%; height:100%;">
<div class="content">Some content</div>
<button>Some Button</button>
</div>
CSS:
.my-container {
display: flex; /* add flex to container */
flex-flow: column nowrap; /* set flex layout to be vertical */
}
.content {
background: white; /* set white background on content div */
flex-grow: 1; /* force content div to take over all the remaining space */
}
The easiest way to accomplish this is by using Flexbox with a wide range of support across browsers. https://caniuse.com/#feat=flexbox.
More specifically we will be focusing on flex-grow. Flex-grow will allow us to use up all available space between components on our page.
(Edit: The way Abishek is using Bootstrap cards above is the best bootstrap solution specifically tailored to cards: https://stackoverflow.com/a/63022092/6871408)
You can learn more about bootstrap and flex-grow here. https://getbootstrap.com/docs/4.1/utilities/flex/#grow-and-shrink
.container {
background-color: #ccc;
}
.container button {
background-color: #777;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container d-flex flex-column" style="width: 200px; height: 400px;">
<div class="flex-grow-1">Hello World!</div>
<button>Button</button>
</div>.container {
width: 200px;
height: 400px;
display: flex;
flex-flow: column;
background-color: #ccc;
}
.content {
flex-grow: 1;
}
.container button {
background-color: #777;
}<div class="container">
<div class="content">
Hello World!
</div>
<button>Button</button>
</div>