I'm trying to create a responsive web page. I have a header div that's 60px, and a landing div right below it that I want to take up the rest of the screen (height 100%). However, it overflows. I can't use overflow:hidden because when I zoom in, I can't scroll down anymore.
**************CSS***************
#home{
margin: 0;
height: 100%;
min-height: 100%;
width: 100%;
}
.header {
width: 100%;
height: 60px;
background-color: none;
}
.landing{
margin: 0 auto;
height: auto;
min-height: 100%;
width: 100%;
background-color: yellow;
}
*************HTML*************
<div id="home">
<div class="header"></div>
<div class="landing"></div>
</div>
How do I fix this so that my landing page doesn't overflow?
Use calc:
.landing {
min-height: calc(100%-60px;);
[...etc...]
}
html,
body {
height: 100%;
margin: 0;
}
#home {
margin: 0;
height: 100%;
height: 100%;
min-width: 100%;
}
.header {
width: 100%;
height: 60px;
background-color: blue;
}
.landing {
margin: 0 auto;
height: auto;
min-height: calc(100% - 60px);
min-width: 100%;
background-color: yellow;
}
<div id="home">
<div class="header"></div>
<div class="landing"></div>
</div>
here is a full working example for a page with a 60px tall header, with the rest of the page being filled by a div. It uses flexbox (display: flex), I changed a few things from an answer here. You may have a to change a few things (classes, ids, etc.) to get it to work for you but this should work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
html,body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 60px;
}
.box .row.content {
flex: 1 1 auto;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="row header">
<p><b>header (60 px tall)</b>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
</div>
</body>
</html>
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 = "";
}
}
}
how do I remove the indent in 1 px left of the blue div? I tried to reset border, no effect
body
{margin: 0; padding: 0; width: 100%; height: 100%; background: #222222;}
.container
{background: red; width: 1600px; height: 100px; margin: 0 auto;}
.header
{background: blue; width: 100%; height: 64px; box-sizing: border-box;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div class="container">
<div class="header"></div>
</div>
</body>
</html>
Judging your example, there seems to be some margin on the body element. You can remove it like this:
.container {
background: red;
width: 1600px;
height: 100px;
margin: 0 auto;
}
.header {
background: blue;
width: 100%;
height: 64px;
box-sizing: border-box;
}
body {
margin: 0;
}
<div class="container">
<div class="header"></div>
</div>
My goal was to get the footer to stay at the bottom of the page and to go further down when more content is added. In doing so, a div element on my page which follows the footer has stopped half way when there isn't enough content.
My question is, how do you get the middle-stripdiv to stretch to the footer and have the goal above still achievable.
Here is a simplified JSFiddle to show the issue.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #283343;
height: 50px;
}
#middle-strip {
padding-bottom: 100px;
background: #32cd32;
width: 500px;
margin: auto;
}
#content-area {
width: 400px;
height: 100%;
margin: auto;
}
#footer {
background: #283343;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
<div id="container">
<div id="header">
THIS IS THE HEADER
</div>
<div id="middle-strip">
<div id="content-area">
THIS IS WHERE THE CONTENT WILL GO
</div>
</div>
<div id="footer">
THIS IS THE FOOTER
</div>
</div>
You can use flexbox to achieve this:
#container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#middle-strip {
flex: 1;
}
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
I want to make .side-menu element's position fixed, but I have no success with the code below. .side-menu element moves with .child-container content.
Why it doesn't work and how to make it work? :)
HTML:
<div class="pageWrapper">
<div class="container">
<div class="side-menu">
Menu content
</div>
<div class="child-container">
Large Content
</div>
</div>
</div>
CSS:
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.pageWrapper {
overflow-x: hidden;
min-width: 1200px;
height: 100%;
}
.container {
position: relative;
width: 1170px;
margin: 0 auto;
height: 100%;
}
.side-menu {
position: fixed;
width: 80px;
height: 300px;
}
.child-container {
position: relative;
margin: 40px auto 0 auto;
width: 900px;
}
I have updated the code with the html of the question:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
*
{
margin: 0;
}
.container
{
position: static;
padding: 0px;
width: 1200px;
margin: 0 auto 0 auto;
}
.side-menu
{
position: fixed;
background: red;
width: 200px;
}
.child-container
{
background: orange;
float: left;
width: 1000px;
margin-left: 200px;
}
</style>
<body>
<div class="pageWrapper">
<div class="container">
<div class="side-menu">
Menu content
</div>
<div class="child-container">
Large Content
</div>
</div>
</div>
</body>
</html>
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!!!