This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
I'm trying to get the container div to stretch to the full height of the parent. As you can see the parent (body) has the info color and the container has the primary color. The color of the container should stretch over the color of the parent, but its not. I just used colors to help identify what section of my html was not stretching to the full height of the page. Below is the source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body class="body bg-info">
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-4">
<div class="info-stats">
Image Id:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Status:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Endpoint:
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info-logs">
Logs:
</div>
</div>
</div>
</div>
</body>
</html>
and the css file
.body {
background: #eeeeee;
}
.info-stats {
background: #ffffff;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
height: 25%;
width: 100%;
margin-top: .5%;
}
.info-logs {
background: #ffffff;
height: 50%;
width: 100%;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
margin-top: 1%;
}
.container-fluid {
height: 100%;
}
appreciate the help!
The reason is that your html and body tag are not strechted to be full height. You should style them like this:
html, body {
height: 100vh;
}
Here is a working codepen
You can't use min-height as it won't work with .container-fluid {height:100%}.
Note: Don't use background color for finding html elements! Instead use inspect element and hover your mouse over html elements.
Elements with 100% height only expand to the height of their parent elements. Add 100% height to the html and body tags:
html,body{
height: 100%;
}
While you're at it, get rid of the height from .info-stats and .info-logs:
html,body{
height: 100%;
}
.body {
background: #eeeeee;
}
.info-stats {
background: #ffffff;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
width: 100%;
margin-top: .5%;
}
.info-logs {
background: #ffffff;
width: 100%;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
margin-top: 1%;
}
.container-fluid {
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<body class="body bg-info">
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-4">
<div class="info-stats">
Image Id:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Status:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Endpoint:
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info-logs">
Logs:
</div>
</div>
</div>
</div>
</body>
</html>
Try this... set height: 100%; for .info-stats and .info-logs
.body {
background: #eeeeee;
}
.info-stats {
background: #ffffff;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
height: 100%;
width: 100%;
margin-top: .5%;
}
.info-logs {
background: #ffffff;
height: 100%;
width: 100%;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
margin-top: 1%;
}
.container-fluid {
height: 100%;
}
<html>
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body class="body bg-info">
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-4">
<div class="info-stats">
Image Id:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Status:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Endpoint:
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info-logs">
Logs:
</div>
</div>
</div>
</div>
</body>
</html>
Related
.status-light-red::before{
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top:50%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<p>Company Name</p>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<p>status</p>
</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
I am using here bootstrap 4.3.1 with flex concept with some custom pieces of CSS. Here the status-light and other div items are not proper center horizontally, how am I doing center horizontally?
Note: Don't want a solution by adding custom top property value (Ex. top:58%; or top:58px;), I need a proper logical solution.
You might use vertical translation to bring it up in line with the text elements. Notice that I stripped out the span and paragraph elements which don't seem to be doing anything.
.status-light-red::before{
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
transform: translateY(-50%);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>1</div>
<div>Company Name</div>
<div>Job Applied For</div>
<div>Status</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
You can give the p the same line-height as the container - here I added some borders and padding just to be painfully obvious what is where.
I also made some p into a div because that seems "cleaner" given your requirement.
.job-list-view-section {
border: 2px blue solid;
padding: 0.25rem;
}
.job-list-view-section .col-12 {
border: 1px red solid;
padding: 0.25rem;
}
.job-list-view-section .col-12 .d-flex {
padding: 0.25rem;
}
.job-list-view-section .col-12 .my-shadow>* {
border: 1px green solid;
display: flex;
align-items: center;
justify-content: center;
height:3rem;
}
.job-list-view-section .col-12 .my-shadow>*>p {
background-color: #ddffdd;
display: inline-block;
align-self: flex-start;
line-height: 2.9rem; /*match to align text in the p to the green box, less than 3 for the borders */
}
.wrap-things {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border: solid 1px lime;
align-self: center;
}
.status-light {
border: solid 1px lime;
height: 0.5rem;
width: 0.5rem;
}
.status-light-red::before {
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before {
content: "";
border-radius: 50%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<div>Company Name</div>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<div>status</div>
</div>
<div class="wrap-things">
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
</div>
See, borders:
.status-light-red::before{
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top:50%;
}
.my-shadow >div{border: solid 1px red;}
.my-shadow >div>p{border: solid 1px lime;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<p>Company Name</p>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<p>status</p>
</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
Remove the padding from <p>.
Also, to align the red dot add top: calc(50% - 5px); to ::before.
See MDN calc.
.status-light-red::before{
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top: calc(50% - 5px);
}
.job-list-view-section p{
margin-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<p>Company Name</p>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<p>status</p>
</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
also, you could try displaying the parent flex like
.status-light-red::before {
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light{
display: flex;
align-items: center;
justify-content: center;
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
/*top pos removed*/
}
.job-list-view-section p {
margin-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<p>Company Name</p>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<p>status</p>
</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
I'm trying to create a card like structure where I want to display and image and some text.
This is my result:
I like most of the result, it just bothers me that not all images have this 5rem x 5rem size.
How can I solve this?
It would appear that the width / height of the .card-img-holder does not always fit 5x5.
.card {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
padding: .5rem;
margin: .5rem;
flex: 1 1 0px;
}
.card-img-holder {
width: 5rem;
height: 5rem;
}
.card-img {
width: 100%;
height: 100%;
object-fit: contain;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 50%;
}
.card-img-name {
padding: .5rem;
}
.card-img-name p:first-of-type {
font-size: 1rem;
font-weight: bold;
}
<!-- Jest -->
<div class="card">
<div class="flex-container centered">
<div class="card-img-holder">
<img src="https://picsum.photos/335/150" alt="Jest" class="card-img" />
</div>
<div class="card-img-name">
<p>Jest</p>
<p>Testing</p>
</div>
</div>
<div>
Website
</div>
</div>
<!-- React -->
<div class="card">
<div class="flex-container centered">
<div class="card-img-holder">
<img src="https://picsum.photos/350" alt="React" class="card-img" />
</div>
<div class="card-img-name">
<p>React</p>
<p>Frontend Library</p>
</div>
</div>
<div>
Website
</div>
</div>
<!-- Git -->
<div class="card">
<div class="flex-container centered">
<div class="card-img-holder">
<img src="https://picsum.photos/63/150" alt="Git" class="card-img" />
</div>
<div class="card-img-name">
<p>Git</p>
<p>Version Control</p>
</div>
</div>
<div>
Website
</div>
</div>
I have little issue with Flex wrap, my code is like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.0/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="box">
<div id="mr">
<div class="item " id="1">1</div>
<div class="item " id="2">2</div>
<div class="item " id="3">3</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And CSS
.item {
height: 50px;
width: 50px;
border-radius: 1rem;
margin: 1rem .5rem;
background: #53d5bb;
color: rgba(255, 255, 255, 0.45);
-webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
text-align: center;
line-height: 50px;
font-size: 1rem;
}
#mr {
display: flex;
flex-wrap: wrap-reverse;
}
.box {
height: 400px;
}
What am I doing wrong? Can this be up to Bulma CSS or I miss something? Why this class flex-wrap: wrap-reverse; doesn't work? Also, here is my fiddle https://jsfiddle.net/kv3gfs4r/1/
It works. When you resizes the window and container is not fully visible it works as it should. I would say it starts from bottom and wrap to the top so when wrap is needed it just writes from the bottom to top.
there is of course flex-direction: row-reverse that that would reverse the order of every element.
Please refer to what do you want to accomplish.
I am making a landing page and I made it using bootstrap columns, and this is how it look like fullscreen:
And this is what it looks like when i try resizing it to half-screen:
This is probably bootstrap trying to make the site mobile, is there a way to turn this off?
My code:
<!DOCTYPE html>
<html>
<head>
<title> title</title>
<link href="style.css" rel="stylesheet" type="text/css" >
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8 header">
<div class="row title-row" >
<div class="col-md-1" >
</div>
<div class="col-md-3 left">
</div>
<div class="col-md-7">
<h1>A title</h1>
</div>
<div class="col-md-1">
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</body>
</html>
body {
margin: 0;
background-image: url('img/bg6.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
background-color: #e1e1e1 !important;
}
.header {
margin-top: 5vw;
height:60vh;
background-color: white;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.title-row {
padding-top: 5vw;
}
.left {
background-image: url(http://www.top13.net/wp-content/uploads/2014/11/blue-small-flower-555.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 40vh;
}
I want the text to not be larger than the image, here is an example of the problem
http://i.imgur.com/DwIMS3Q.png
And how I would like it to be
http://i.imgur.com/VOA1W60.png
As you can see, when the picture is too tight, there is white borders, due to the text. I would like the text to not be larger than the picture.
Here is the HTML code :
<div class="row">
<div class="col-md-6" style="float:none;margin:0 auto;">
<div class="polaroid center-block">
<img src="./images/650x650.png" alt="Norway" class="img-responsive center-block" style="width:auto;height:auto">
<div class="my_container" style="width:auto;height:auto">
<p>The Troll's in Hardanger, Norway</p>
</div>
</div>
</div>
</div>
And here is the CSS :
body {
margin: 25px;
}
div.polaroid {
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.my_container {
text-align: center;
padding: 10px 20px;
}
Thanks in advance.
Set the width of the image to 100%.
.polaroid img{
width: 100%;
}
And the polaroid as well:
.polaroid {
width: 100%;
}