I am using bootstrap 3 to design a HTML page and right now I am facing a problem. I want my div tag container to take 100% height of the browser window but using CSS only (no javascript).
I went through lots of questions in stack overflow itself but couldn't find a solution that could help me. I don't want to use vh, as when you resize your window it wont work properly or wont show the container properly and I have 5 div tag containers and want every container to be the same size of the browser window.
p.s I don't think html or css is required as it can be answered without the code.
Is this what you want?
html, body {
height: 100%;
margin: 0;
}
#thediv{
min-height:100%;
min-width:100%;
background-color:red;
display:flex;
align-items:stretch;
position:relative;
}
.interiordiv{
background-color:blue;
width:50px;
margin:15px auto 15px auto;
}
<div id="thediv">
<div class="interiordiv">A</div>
<div class="interiordiv">V</div>
<div class="interiordiv">C</div>
<div class="interiordiv">D</div>
<div class="interiordiv">E</div>
</div>
If not please try to make it clearer, if you don't want to post code that's ok but post a mockup image or something.
All that is required is to set the 'min-height' CSS attribute of the Div you wish to re-size:
<div style="min-height: 100%"></div>
Ensure your html & body tags have a height of 100% also.
Here you go.. as you said you are using bootstrap, you might override the row class and achieve this easily.
.row{
height:100%;
}
<div class="row bg-success"></div>
<div class="row bg-danger"></div>
<div class="row bg-warning"></div>
<div class="row bg-info"></div>
<div class="row bg-primary"></div>
Here are the screen sizes I tested it with.
THESE TWO WERE FULL SCREEN DESKTOPS
THESE WERE NON-FULL SCREEN BROWSER
THESE WERE IPHONE RESOLUTION IN PORTRAIT MODE
THESE WERE IPHONE RESOLUTION IN LANDSCAPE MODE
Related
I am curious as to what I have to change to the following jsbin (see code below) in order to get a couple things to happen:
The 4 images should be in the centre of the page, in stead they are off a bit.
The 4 images should sit beside each other (not over lapping like they are) and they should stay beside each other, with no gaps developing, above 1920px. They should then follow bootstrap conventions when the screen shrinks. (This leads to point 3)
When the screen shrinks bootstrap conventions should be followed for how rows and columns and containers behave. Images should shrink down appropriately.
Currently what I have is my attempt. I can get them beside each other, with gaps as the screen size gets larger or over lapping at 1920px.
When the screen shrinks, things go hey wire. There should be 4 images beside each other with the same width of gap on either side of the first and last image, they should stay beside each other regardless of the screen size (going up) and then follow bootstrap conventions when the screen shrinks, images should also shrink to fit on mobile devices.
Html
<div id="wrap">
<div class="container">
<div class="container image-links">
<div class="row-helper">
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
</div>
</div>
</div>
</div>
</div>
Css
-- This is compiled down from sass.
#wrap .container .image-links {
width: 100%;
}
#wrap .container .image-links .row-helper {
margin-left: 245px;
}
#wrap .container .image-links .row-helper .row .col-md-3 {
margin-left: -2px;
margin-right: -62px;
}
I guess this is what you want. Check here.
Well, the images need to be given a size so that they fill their containers and not overflow. This was the reason of their overlapping. So just gave them a width here.
.img{
width:100%;
}
So removed the css you gave for adjusting the margins.
And, for removing those gaps, just made padding as 0px as below.
#wrap .container .image-links .row-helper .row .col-md-3 {
padding:0px;
}
I have an image which its size is 1050x700. I would place it in full screen when it is in desktop. the idea would be to place it when is in desktop version under the black bar in this way the image remain almost the same.
here it is the jsfiddle example http://jsfiddle.net/qLdp4czn/1/
in the mobile there is no problem because it fit the device display so it should back normal without placing it under the bar
here is the code:
<div class="container-fluid top-bar">
<div class="row-top">
<div id="central-block" class="text-center">
<p>Title</p>
</div>
</div>
</div>
<div class="img-background">
<img src="http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg" alt="animal" class="img-responsive">
</div>
Put the image as a background-image instead and remove the img element:
.img-background {
background-image:url(http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg);
background-repeat:no-repeat;
background-size:100% auto;
position:relative;
width:100%;
height:100%;
}
You might have to set the width and height of the element depending on your other CSS.
I don't even know if what I am asking is possible, but it's worth a shot. Basically I have a one page scrolling website controlled by jQuery, but it's a very very simple code, no plugin or external doc. That works great.
Every "page" if you will is divided into different divs to separately control function of pictures, tables, fonts, etc. per each page. Like this:
//home page
<div id="home">
content here
</div>
//about page
<div id="about">
content here
</div>
and so on and so forth... my question is, can i do something like this? I've tried but maybe I don't have the "decimal" in the right spot...
//home page
<div id="home resize">
<div id="home">
content here
</div>
</div>
//about page
<div id="about resize">
<div id="about">
content here
</div>
</div>
and then CSS be
home resize {
position: relative;
height: 100%;
width: 100%;
}
Two things I see right away. First, your CSS rule should be .home.resize instead of home resize. Second, height, when using percentages, requires that the height be set on the html tag to make a difference. So you will need rules such as this:
html {
min-height: 100%;
}
.home.resize {
height: 100%;
}
Otherwise, height will never take up the entire browser window height.
This all being said, I would guess that your best solution would involve JS or jQuery in some way. I know there are several single page scrolling plugins that do this job quite well.
First things first. HTML id's cannot contain spaces. You should define a class name resize. That being said. You can achieve this by using this.
Here is a fiddle
div id="home" class="resize">
content here
</div>
<div id="about" class="resize">
content here
</div>
.resize{
display:block;
height:100vh;
margin:0;
}
#home{
background-color:red;
}
#about{
background-color:blue;
}
vh is viewport height. It will set the height of your div same as viewport. 1vh is equivalent to 1/100th of viewport height
I am creating my first site using bootstrap, and as its a joomla site its version 2.3
I am having some problems getting going
here is the code so far:
<body>
<div class="container">
<div class="row logobar">
<div class="span12">
<div class="logoholder">
<img src="templates/<?php echo $this->template ?>/images/open-plan-design-logo.jpg" alt="Open Plan Design Logo " />
</div>
</div>
<!-- row --></div>....
and the css
body {
background:#231f21;
background-color:#DCDBDB;
color:#fff;
}
.container {
background-color:yellow;
}
.logoholder{
width:499px;
margin:0 auto;
}
.logobar {
margin-bottom:20px;
background-color:green;
}
At reduced screen widths everything looks fine - the image is centered, and reduces in size
However, at full width the image is not exactly centered, and there is an odd bit of green (from .logobar) sticking out at the left. If I take out the .row then the green disappears but of course nothing is resonsive
I guess I am doing something wrong...
you can see what I mean here www.opd.ee-web.co.uk
You need to change your row to row-fluid which will remove this negative margin.
<div class="row-fluid logobar">
Documentation [1].
More info [1].
The elements with .row have a negative margin applied to ensure and contained .span elements are correctly aligned.
You can remove this negative margin with some custom css, but that is likely to cause more problems.
The ideal solution is to simple move the logobar to the span level.
<div class="span12 logobar">
Add following code in your custom css file
body .row{
margin-left:0 !important;
}
I'm using Twitter Bootstrap. Here is my problem: I need to set div's background color,which should be full screen, but when I try :
and my HTML:
<div class="rowHome">
<div class="container">
<div class="row">
...
</div>
</div>
</div>
and full CSS:
.container{
width: 960px;
}
...
.rowHome{
margin-top:10px;
width:100%;
background-color:#400143;
}
it look like this, when I resize page:
but when I scroll right I see the bug:
Can someone tell me where is my error ?
This type of problem is mostly come when the parent have flexible width & his child have fixed width. Write this in your css:
body{
min-width:960px;
}
Check this for more iPad background for div blocks not spanning entire width of screen