I want to create html code using Bootstrap. But i have a problem. I don't adjust div's height according to a browser height. I tried everything i know.
How can I adjust the div's height browser height?
Here is my code:
body{
height: 100%;
width: 100%;
}
#leftMenu{
height: 500px;
}
#viewport{
height: 400px;
overflow: hidden;
}
#informationMenu{
height: 100px;
overflow: scroll;
}
#rightMenu{
height: 500px;
}
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="leftMenu" style="background-color: #cc0052" >
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="row" id="viewport" style="background-color: aquamarine">
</div>
<div class="row" id="informationMenu" style="background-color: cadetblue">
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="rightMenu" style="background-color: #bfff00">
</div>
</div>
</div>
</body>
You should be using vh for height. It also has responsive design. 1hv = 1% of the viewport height (broswer), meaning that 100vh will be the value you need ;)
Edit: If you're trying to do the same for width, you need to use vw instead of vh because vh refers to the height and vw refers to the width ;)
Related
I have a gallery in the center of my website - it has a dynamic width (bootstrap column), and fixed height (80vh). I want the images inside to have 50% width of the container, and 350px height:
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6" style="height: 80vh;">
<div style="overflow-y: auto;">
<div style="width: 50%; height: 350px; float: left">
<img src="..." style="min-width: 100%; height: 350px;">
</div>
<div style="width: 50%; height: 350px; float: left">
<img src="..." style="min-width: 100%; height: 350px;">
</div>
<div style="width: 50%; height: 350px; float: left">
<img src="..." style="min-width: 100%; height: 350px;">
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
The thing is that when I resize the website, the width is changed, and the height stays the same - the image gets resized. Is there a better solution? I've been thinking about zooming on an image instead of resizing the whole thing - is this possible?
If you strictly have to use a 350px height for each gallery item and want images to maintain aspect ratio, you can use background-size: cover to zoom in and crop the images instead of resizing them. See: https://jsfiddle.net/nelonoel/c8zsscuL/
I cant change the height only the width works? I dont understand:)
.image-size{
width: 100%;
height: 50%;
}
<div class="container">
<div class="row">
<div class="page-header">
<div class="col-md-8">
<nav class="navbar navbar-default navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#">Lexicon</a>
</div>
<ul class="nav navbar-nav">
<li>Java Fundamentals</li>
<li>Java Advanced</li>
<li>Front-End</li>
<li>Test and Management</li>
<li>Java Enterprise</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="jumbotron">
<div class="row">
<div class="col-md-12" align="center">
<img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
</div>
</div>
</div>
</div>
Im using bootstrap does i have anything to do with my problem? Why does the whole image change size when i just change the width.
it is because the Col that contain the img don't have height and you can't give % value to image because the parent don't have any height to get the 50% of that!
in other hand you can make it possible with "px";
.image-size{
width: 100%;
height: 250px;
}
Or add height for container Col
You should set specific height for parent of image (class=col-md-12)
For example:
.col-md-12{
height: 100px;
}
.image-size{
width: 100%;
height: 50%;
display: block;
}
Your should provide height to parent first before assigning to a child.
You haven't set the parents height . i.e. div's height so that it the will know what 50% means.
<div class="col-md-12" align="center" style='height:100px'>
<img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
</div>
I do not support inline styling.
we can set height pixel it will work
.image-size {
height:300px;
width :100%;
}
<div class="col-md-12" align="center">
<img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
</div>
And if you want to set the height with percentage you have to set position:absolute to the image like
.image-size {
height:50%;
width:100%;
position:absolute;
left:0;
top:0;
}
<div class="col-md-12" align="center">
<img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
</div>
you can use css style
.thumbnail, .image-size, src {
height: 50%;
width: 100%
}
I'm using bootstrap to display a set of sm-4 divs. Each of these includes a panel, which header contains an image. These images got variable sizes,however, I would like to get these columns to share the same height. Is it possible ?
So far, this is the html
<div class="row">
<a href="/app_dev.php/fly/50" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/AAT3.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Falaise - Dieppe</h4>
<p>3 places</p>
</div>
</div>
</div>
</a>
<a href="/app_dev.php/fly/48" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/BE36.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Bordeaux - Toulouse</h4>
<p>1 place</p>
</div>
</div>
</div>
</a>
<a href="/app_dev.php/fly/46" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/DA20.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Flers - Pontoise</h4>
<p>1 place</p>
</div>
</div>
</div>
</a>
</div>
Here's the CSS (This is what I tried so far)
.flycard
{
text-align: left;
}
// EDIT : ADD THIS TO SOLVE THE PROBLEM
.planepi
{
max-height: 200px;
min-height: 200px;
overflow: hidden;
height: 100%;
width: 100%;
}
.planepi img
{
max-width:100%;
max-height:100%;
}
And, here's the result
CSS Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding, font-size, border-width, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted for some CSS properties, negative lengths are allowed
There are two types of length units: relative and absolute.
w3schools css units
.planepi {
min-height: 30vh;
height: 30vh;
max-height: 30vh;
overflow: hidden;
}
vh Relative to 1% of the height of the viewport
For anyone with the same problem, you need to specify the max-height of the div that holds the image:
.planepi {
max-height: 200px; //this is the max height you want
overflow: hidden; //everything that goes bellow 200px will be hidden
}
Of course it is easier for you to prepare the images to be in the same height, but this will work.
I need to set the height container to 100% browser, but when you put the contents of the tags will break containter.
html, body {
height: 100%;
min-height: 100%;
}
.container {
min-height: 100%;
height: 100%;
background-color:red;
}
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="http://placehold.it/1920x1080 " alt="" />
<img class="img-responsive" src="http://placehold.it/1920x1080 " alt="" />
</div>
</div>
Use vh for full height. 100vh = 100%.
Now, use container-fluidfor get full width on bootstrap 3
I'm trying to achieve the following layout for a search result box. Specifically a 100% width and height image that on the right has two stacked containers that equals the height of the image, each with differing background colours that are butted up right against the image.
All attempts to achieve this simple layout are failing miserably. The issue I keep hitting is the when using something like:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
The image doesn't quite fill the col-md-3 column completely and thus you see the column's background.
What's the best way to do this?
Bootstrap columns have a padding of 15px by default. Also the image width has to be 100%. You can do something like this:
<div class="search-result-box">
<div class="row">
<div class="col-md-3" style="padding: 0;">
<img src="" class="img-responsive" style="width: 100%;">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
Jsfiddle: http://jsfiddle.net/HM4gE/1/
I wouldn't use Bootstrap columns though to achieve this since you seem to have some fixed heights and widths for columns. Instead I would do it like this (given that the height and the width of the image is always 196px): http://jsfiddle.net/HM4gE/2/
Check browser support for calc() before using it: http://caniuse.com/calc
Here a possible answer:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196" />
</div>
<div class="col-md-9">
<div class="title">Title</div>
<div>Link1</div>
</div>
</div>
</div>
.search-result-box {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.row > * {
display: table-cell;
}
.col-md-3 {
background: orange;
width: 260px;
height: 196px;
}
.col-md-9 {
vertical-align:top;
background: grey;
}
.title {
background: #ccc;
width: 100%;
height: 150px;
}
http://jsfiddle.net/junkie/fAPQ6/2/