I am using the bootstrap framework, So while constructing a div if I give a height as 32em. It does perfectly fit in one phone, but when chosen the bigger size. The div does not occupy the remaining height in the bottom. How to make it occupy the remaining height in the bottom if the phone is changed?
Note that div is under the fluid-container and is the last div in that container. And code is something like this.
<style>
.box{
height: 32em;
background: grey;
}
</style>
<div class="container-fluid">
<div class="row box"></div>
</div>
What about this demo
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<body>
<div class="navbar navbar-fixed-top">
<!-- Rest of nav bar chopped from here -->
</div>
<div class="container fill">
<div id="map"></div> <!-- This one wants to be 100% height -->
</div>
</body>
#map {
width: 100%;
height: 100%;
min-height: 100%;
background: red;
display: block;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}
Please, check the snippet below
.container-fluid {
height: 150px;
background-color: red;
width: 100%;
overflow: hidden;
}
.box {
height: 100%;
background-color: blue;
width: 50%;
display: block;
}
.small-box {
width: 75%;
height: 50px;
background-color: green;
}
<div class="container-fluid">
<div class="small-box"></div>
<div class="box"></div>
</div>
One more solution is here
html, body {
height: 100%;
margin: 0px;
}
.container-fluid {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
width: 100%;
}
.box {
display: table-cell;
background: grey;
}
<div class="container-fluid">
<div class="row box">
</div>
</div>
You can also find this solution in myblog
Related
I have a fixed width element that needs to be centered when it fits on the page but if not then extend beyond the page width accessible with page scroll. I've got close to making this work but it overlaps the sidebar.
1/ How can I centre the large-fixed-grid (green element) if it fits inside the container/screen width but if not start it from after the sidebar?
2/ Additionally, if I scroll horizontally to show the fixed width element, the top-header shows a gap with difference between screen width and large-fixed-grid width (red element). Is there a way to offset the top-header inline with the scrolling horizontally so there is no white gap?
The yellow element should still be centred on the original width without scrolling. It currently behaves as expected.
I have tried lots of CSS variations but cannot get this working.
JSFiddle: https://jsfiddle.net/7tg2jo69/
Image:
Html:
<!DOCTYPE html>
<html>
<header class="top-header"></header>
<div class="page">
<div class="sidebar">
<div class="menu">Item1</div>
</div>
<main class="main">
<article class="content">
<div class="container">
<div class="row justify-content-center">
<div class="small-flexible-grid">
</div>
<div class="large-fixed-grid">
</div>
</div>
</div>
</article>
</main>
</div>
</html>
CSS:
.top-header {
height: 40px;
background:red;
}
.sidebar {
z-index: -1;
background:blue;
float: left;
width: 200px;
height: calc(100vh - 3.5rem);
position: sticky;
top: 0;
overflow-y: auto;
}
.main {
margin-left: 200px;
}
.content {
padding: 1.1rem;
}
.container {
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.justify-content-center {
justify-content: center;
}
.small-flexible-grid {
background: yellow;
width: 60%;
height: 100px;
}
.large-fixed-grid {
background: green;
min-width:600px;
width: 600px;
height: 100px;
}
Update:
I've fixed 1/ by removing class justify-content-center entirely and adding margin: auto; to both .small-flexible-grid and .large-fixed-grid
how about change the styles to
.large-fixed-grid {
background: green;
width: 100%;
max-width: 600px;
height: 100px;
}
Solved both of these using the following
JSFiddle: https://jsfiddle.net/m9wdzgb1/
Html:
<!DOCTYPE html>
<html>
<header id="top-header-onscroll" class="top-header"></header>
<div class="page">
<div class="sidebar">
<div class="menu">Item1</div>
</div>
<main class="main">
<article class="content">
<div class="container">
<div class="row">
<div class="small-flexible-grid">
</div>
<div class="large-fixed-grid">
</div>
</div>
</div>
</article>
</main>
</div>
</html>
CSS:
.top-header {
height: 40px;
background:red;
}
.sidebar {
z-index: -1;
background:blue;
float: left;
width: 200px;
height: calc(100vh - 3.5rem);
position: sticky;
top: 0;
overflow-y: auto;
}
.main {
margin-left: 200px;
}
.content {
padding: 1.1rem;
}
.container {
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.small-flexible-grid {
background: yellow;
width: 60%;
margin: auto;
height: 100px;
}
.large-fixed-grid {
background: green;
min-width:600px;
width: 600px;
margin: auto;
height: 100px;
}
Javascript:
window.onscroll = function (e) {
var top_header = document.getElementById('top-header-onscroll');
if (top_header) {
if (window.pageXOffset > 0) {
top_header.style.width = (window.innerWidth + window.pageXOffset - 30) + 'px';
}
else {
top_header.style.width = "";
}
}
}
The end goal of this landing page is to have two images side-by-size, both 100% height, but 50% width, maintaining the aspect ratio and hiding the overflow.
This seems like it should be pretty straightforward, but I'm running into nothing but problems with it no matter how I try it.
At this moment I've got the following:
<head>
<link rel="stylesheet" href="Stylesheets/default.css">
</head>
<body>
<div class="page">
<div class="img-wrapper">
<img src="Images/cal-engel-531490-unsplash.jpg">
</div>
<div class="img-wrapper">
<img src="Images/rawpixel-660717-unsplash.jpg">
</div>
</div>
</body>
.page {
width: 100%;
height: 100vh;
white-space: nowrap;
}
.img-wrapper {
position: relative;
}
img {
float: left;
width: 50%;
height: 100vh;
}
This is achieving the height and width goals, but my tinkering so far has not gotten the image to adjust proportionally and tuck the overflow away.
I've searched around and come up with nothing that has solved this so far, apologies if I missed a super-obvious article somewhere. Any help is appreciated!
I would just make them background images. That way you don't have to worry about overflow. Here I'm setting the anchor to 100% width and height (of its container, so 50% of the page each), which appears to be what you wanted. The background-position keeps the left and right images anchored at the top right and top left respectively, and the background-size of cover ensures the aspect ratio is kept intact. Note that if your images are taller than they are wide, this might not have the effect intended.
body {
margin: 0;
}
.page {
width: 100%;
height: 100vh;
font-size: 0;
display: flex;
flex-flow: row nowrap;
justify-content: stretch;
}
.img-wrapper {
flex: 1 1 50%;
}
.img-wrapper a {
display: block;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
}
.img-wrapper:first-child a {
background-image: url(https://picsum.photos/300/200);
background-position: top 0 left 100%;
background-size: cover;
}
.img-wrapper:last-child a {
background-image: url(https://picsum.photos/300/200);
background-position: top 0 right 100%;
background-size: cover;
}
<body>
<div class="page">
<div class="img-wrapper">
</div>
<div class="img-wrapper">
</div>
</div>
</body>
Try adding
.page { overflow: hidden; }
to your code. This should hopefully ensure that any overflowing content is hidden.
You have given width:50% to the image instead of its parent element.
<head>
<link rel="stylesheet" href="Stylesheets/default.css">
<style>
.page {
width: 100%;
height: 100vh;
white-space: nowrap;
}
.img-wrapper {
position: relative;
float: left;
width: 50%;
}
.img-wrapper a {
display: block;
}
img {
width: 100%;
height: 100vh;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="page">
<div class="img-wrapper">
<a href="pol.html">
<img src="Images/cal-engel-531490-unsplash.jpg">
</a>
</div>
<div class="img-wrapper">
<a href="biz.html">
<img src="Images/rawpixel-660717-unsplash.jpg">
</a>
</div>
<div class="clear"></div>
</div>
</body>
Use flex and give its child elements 50% width. Remove the default margin on body. And to remove white space due to images add font-size:0 on the .page div. You can obviously ovverride this font-size later when you have text on this page for that section.
body {
margin: 0;
}
.page {
width: 100%;
height: 100vh;
font-size: 0;
display: flex;
}
.img-wrapper {
width: 50%;
}
img {
width: 100%;
height: 100%;
}
<body>
<div class="page">
<div class="img-wrapper">
<img src="https://picsum.photos/300/200">
</div>
<div class="img-wrapper">
<img src="https://picsum.photos/300/200">
</div>
</div>
</body>
Here is the solution that I reached. The main issue that I was having was that I had assigned width:50% to img instead of the container.
Here are the final(ish) code blocks that are working as intended. Thanks for the suggestions!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Stylesheets/default.css">
</head>
<body>
<div class="page">
<div class="img-wrapper-l">
<img src="Images/cal-engel-531490-unsplash.jpg">
</div>
<div class="img-wrapper-r">
<img src="Images/rawpixel-660717-unsplash.jpg">
</div>
<div class="clear"></div>
</div>
</body>
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
}
.page {
width: 100%;
max-height: 100vh;
white-space: nowrap;
overflow: hidden;
}
.img-wrapper-l {
height: 100%;
width: 50%;
overflow: hidden;
position: absolute;
float: left;
}
.img-wrapper-r {
height: 100%;
width: 50%;
overflow: hidden;
position: relative;
float: right;
}
img {
height: auto;
width: auto;
max-width: 1200px;
max-height: 1200px;
}
JsFiddle Demo
I have 2 divs in a container (actually I tagged the first as h1) and I'd like the 2nd div to take the remaining space of it's parent div. Doing height:100% makes it use 100% of its parent height causing it to be larger then the parent because of the other div. In the demo you can see the blue pass the grey.
How do I tell it to use the remaining height? The HTML may change but try not to go crazy
HTML:
<div class="outer_box">
<div class="container">
<h1>Title</h1>
<div class="box">Box</div>
</div>
<div class="container">
<h1>Title</h1>
<div class="box2">Box</div>
</div>
</div>
CSS:
.outer_box {
height: 500px;
}
.container {
width: 30%;
height: 100%;
background-color: grey;
float:left
}
.box {
background-color: blue;
height: 100%;
}
.box2 {
background-color: green;
}
You could do the CSS table layout, and set the box to height:100% to push the title to its minimal height.
http://jsfiddle.net/0w7pqeo6/3/
.outer_box {
height: 300px;
}
.container {
width: 30%;
height: 100%;
background-color: grey;
float: left;
display: table;
}
.container h1, .container > div {
display: table-row;
}
.box {
background-color: blue;
height: 100%;
}
.box2 {
background-color: green;
height: 100%;
}
<div class="outer_box">
<div class="container">
<h1>Title</h1>
<div class="box">Box</div>
</div>
<div class="container">
<h1>Title</h1>
<div class="box2">Box</div>
</div>
</div>
http://jsfiddle.net/utsavoza/9v0dfv39/
HTML part
Title
<div class="box">Box</div>
</div>
<div class="container">
<h1>Title</h1>
<div class="box2">Box</div>
</div>
CSS
.outer_box {
height: 500px;
}
.container {
width: 30%;
height: 100%;
background-color: grey;
float:left
}
.box {
background-color: blue;
height: 84%;
}
.box2 {
background-color: green;
height: 84%;
}
Use height 84% instead of 100%. you can see it in the above link..
I have a website with the following structure:
<html>
<body>
<div id="page">
<div id="anyContent"></div>
<div id="pagecontent">
<div id="bigContent"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
bigContent is dynamic and often stretches to large sizes (demonstrated by its width and height). Because a lot of elements are dynamically rendered into the div, bigContent isn't set to a static width.
How can I force the footer to have the same width as bigContent?
See my example jsFiddle.
html {
margin: 0;
padding: 0;
height: 100%;
min-width: 100%;
}
#page {
min-height: 100%;
min-width: 100%;
position: relative;
}
#bigContent {
background: black;
height: 3000px;
width: 5000px;
}
#footer {
background: blue;
clear: left;
bottom: 0px;
width: 100%;
height: 100px;
}
You can set some properties to #pagecontent then it will work as per your need:
html {
margin: 0;
padding: 0;
height: 100%;
min-width: 100%;
}
#pagecontent {
float: left;
position: relative;
}
#pagecontainer {
min-height: 100%;
min-width: 100%;
position: relative;
}
#bigContent {
background: black;
}
#footer {
background: blue;
height: 25px;
width: 100%;
}
<div id="pagecontainer">
<div id="anyContent"> </div>
<div id="pagecontent">
<div id="bigContent" style="width:500px; height:150px;"></div>
<div id="footer"></div>
</div>
</div>
You have set the width: 5000px and height to 3000px.
<div id="bigContent" style="width:5000px; height:3000px;"></div>
Try this
<div id="bigContent"></div>
and add
#bigContent {
background: yellow;
height: 1000px;
width: 100%;
}
FIDDLE
You set width to #bigContent, better would be to set this width to #pagecontent.
<div id="pagecontainer">
<div id="anyContent"></div>
<div id="pagecontent" style="width:5000px;">
<div id="bigContent" style="height:3000px;"></div>
<div id="footer"></div>
</div>
</div>
http://jsfiddle.net/47hb3fcn/3/
Description:
I am trying to learn to align elements such as divs and headers.
Here's what I have so far > http://jsfiddle.net/QxV6p/
Below are the issues:
The "Main section - in red" is not aligned with the blue header on the right hand side.
I have set the width of the body and the header to the same value of 1000px. And I have set the left div (black) to have a width of 20% and the main div to have a width of 79% (both inside the body) leaving a margin of 10px between the two divs.
I believe I have positioned the div correctly using the "position: relative" feature.
Please suggest what is wrong with the code? Also is there a better way of making the divs (in this case the left/black div and the main/red div) align as if they were inline?
I've tried "display: inline" but for some reason it makes the divs disappear. Any help is appreciated.
Code:
<!DOCTYPE html>
<head>
<style>
header {
max-width: 1000px;
height: 100px;
background: blue;
}
body {
max-width: 1000px;
}
.left {
width: 20%;
height: 2000px;
background: black;
margin-top: 10px;
}
.main {
width: 79%;
height: 2000px;
margin-top: 10px;
background: red;
position: relative;
top: -2010px;
left: 210px;
}
</style>
</head>
<html>
<header>
</header>
<body>
<div class="left"></div>
<div class="main"></div>
</body>
</html>
firstly you need a valid html code
<html>
<body>
<div class="wrapper">
<header>
</header>
<div class="left"></div>
<div class="main"></div>
</div>
</body>
</html>
CSS
header {
max-width: 1000px;
height: 100px;
background: blue;
}
.wrapper {
max-width: 960px;
margin:0 auto;
}
.left, .main {
display:inline-block;
margin-top:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
width: 20%;
height: 2000px;
background: black;
}
.main {
width: 79%;
height: 2000px;
background: red;
margin-left:4px;
}
DEMO
My recommendations:
Avoid positioning using pixels.
Avoid floats for layout.
KISS: if you want your main content to be 80%, set it to 80%. Manually manouvering it into position will take more time and scales poorly.
Demo (I changed some of the sizes for easier viewing in the fiddle)
HTML
<header></header>
<body>
<div class="left"></div><div class="main"></div>
</body>
CSS
header {
height: 100px;
background: blue;
}
.left {
display: inline-block;
width: 20%;
height: 100px;
background: black;
}
.main {
display: inline-block;
width: 80%;
height: 100px;
background: red;
}
use float:left on each element
see it here
<!DOCTYPE html>
<head>
<style>
header {
max-width: 1000px;
margin: 0 auto;
height: 100px;
background: blue;
}
body {
margin:0;
padding:0;
}
.left {
width: 20%;
height: 2000px;
background: black;
margin-top: 10px;
}
.main {
width: 79%;
height: 2000px;
margin-top: 10px;
background: red;
position: relative;
top: -2010px;
left: 210px;
}
.wrapper{
margin:0 auto;
}
.container{
margin: 0 auto;
width: 1200px;
}
</style>
</head>
<html>
<body>
<header>
</header>
<div class="wrapper">
<div class="container">
<div class="left"></div>
<div class="main"></div>
</div>
</div>
</body>
</html>
You can use float:left instead of using "top and left position"
Here is the updated Code:
HTML
<body>
<header></header>
<div class="left"></div>
<div class="main"></div>
</body>
CSS
header {
max-width: 1000px;
height: 100px;
background: blue;
}
body {
max-width: 1000px;
}
.left {
width: 20%;
height: 2000px;
background: black;
margin-top: 10px;
float:left;
}
.main {
width: 78%;
height: 2000px;
margin-top: 10px;
background: red;
float:left;
margin-left:2%;
}
And Working Demo for the same
Hope this helps!!!