I want to have a vertically aligned layout(mobile). It consists of a main part (the main content) which should be in the middle. On the top and bottom of this part there should be like 200px of free space till the edge of the page (yeah like top: 200px). But in this parts there should be some text and it shouldn´t move.
This picture should explain it:
If something is not clear feel free to ask!
Code:
I tried it with "vh values"
#container {
margin-top: 10vh;
margin-bottom: 10vh;
width: 100vw;
height: 80vh;
}
<div id="container"></div>
so that's the basic thing, and if I do it like this:
#container {
width: 100vw;
height: 80vh;
}
#top {
width: 100vw;
height: 10vh;
}
#bottom {
width: 100vw;
height: 10vh;
}
<div id="top></div>
<div id="container"></div>
<div id="bottom"></div>
then it won´t fit in my screen, it's always a little bit too big so that I have to scroll...
Does someone of you have other ideas or improvents to solve this?
* {
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
position: relative;
}
header,
footer {
width: 100%;
height: 100px;
background-color: rgba(0, 0, 0, .8);
position: fixed;
color: #fff;
font-size: 80px;
text-align:center;
z-index: 10;
}
header {
top: 0;
}
footer {
bottom: 0;
}
main {
min-height: 100vh;
padding: 100px 200px;
position: absolute;
top: 0;
box-sizing: border-box;
}
<header>I'm a header</header>
<main>
<p>I need your help ones again... So I want to have a (mobile) layout which is vertically aligned. It consists of a main part (with the main content) which should be in the middle. On the top and bottom of this part there should be like 200px of free space till the edge of the page (yeah like top: 200px). But in this parts there should be some text too & it shouldn´t move.
</p>
<br>
<p>
I need your help ones again... So I want to have a (mobile) layout which is vertically aligned. It consists of a main part (with the main content) which should be in the middle. On the top and bottom of this part there should be like 200px of free space till the edge of the page (yeah like top: 200px). But in this parts there should be some text too & it shouldn´t move.
</p>
</main>
<footer>I'm a footer</footer>
Related
Image:
I have a container div (yellow) which I’d like to keep at 50% width of the window. A child of that container is an image div (purple) that stretches to 100% of the parent container’s width. and there’s a sticky label (pink) on top of the image div (position: absolute so it can be offset relatively to the image). I'd like to keep that entire half of the screen fixed positioning so it stays sticky as I scroll.
There’s also a title under the image, and that title needs to be visible no matter if someone shrinks the window vertically. So in that scenario the image div should shrink vertically, if needed, in order for that title to be shown.
Basically I'm trying to have the image div always be 100% width of the parent container div. With the image div having a max % height so it can shrink vertically. Or have it keep a fixed aspect ratio (3:4 or whatever) when it shrinks vertically.
I'm trying to avoid using fixed pixels, or ems, in the entirety of my CSS. since the website needs to be stretchy/‘fluid’ vertically, because that title under the image has to show.
HTML looks roughly like:
<wrapper>
<left-column>
<normal text and scrollable stuff>
<right-column-yellow>
<image sticky label-pink>
<image div-purple>
<image title>
Sorry if this is damn confusing my brain is fried! Can anyone pls help me?
You can divide your left and right panel by using position fixed.
If I'm not wrong with your description, this is the answer.
<div class="wrapper">
<div class="left">
<p><!--Some very long text--></p>
</div>
<div class="right">
<div class="image">
<div class="label">Label</div>
<div class="title">Title</div>
</div>
</div>
Some CSS
.left,.right{
position: fixed;
width: 50%;
height: 100%;
display: inline-block;
}
.left{
left:0;
top: 0;
overflow: auto;
}
.right{
right: 0;
top:0;
background-color: yellow;
}
.right .image{
position: relative;
width: 100%;
height: 50%;
top: 50%;
left: 0;
background-color: #fff;
transform: translateY(-50%);
}
.right .image .label{
position: absolute;
left: 0;
right: 0;
top: -10px;
text-align: center;
width: 200px;
background-color: pink;
margin: auto;
}
.right .image .title{
position: absolute;
left: 0;
right: 0;
bottom: -40px;
text-align: center;
width: 200px;
background-color: #000;
margin: auto;
color: #fff;
font-size: 30px;
}
You can refer to my codeine as well.
https://codepen.io/masonwongcs/pen/WMJGZb
I'm having a bit of a problem with this design. The page is supposed to start with an image that is focused in the middle of the viewport, then you scroll down below the fold to see more content. I have it working with the code below but there's one issue. The scrollbar throws the viewport image off center. Does anyone know how to fix this? keep in mind, I still want the scrollbar there.
I don't know if this is possible. But could I use jquery to subtract the scrollbar width from the site only if scrollbar is active? I don't really know how to use jquery though. And I feel that if I subtract scrollbar width from 100vw then the site will look off on mobile when there is no scrollbar.
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
overflow-x:hidden;
}
#abovefoldcontainer {
background-color: red;
width: 100vw;
height: 100vh;
}
#abovefoldimage {
background-color: #6FF;
position: relative;
left: 150px;
top: 150px;
width: calc(100vw - 300px);
height: calc(100vh - 300px);
}
#belowfold {
}
<html>
<body>
<div id="abovefoldcontainer">
<div id="abovefoldimage">Content goes here</div>
</div>
<div id="belowfold">
Content goes here too<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
I want to create a website with a single fixed-width centered column and an additional fixed-width sidebar that is position: fixed on the left. When the window is large, this works perfectly, but when I resize the window, they begin to overlap when there's plenty of room left on the right side of the window. For example:
I'd like the center div to be positioned in the center until it runs into the sidebar, at which point I'd like it to have a more fluid responsive design, where the sidebar starts to push the div to the right as you resize the window. For example:
The only solution I'm aware of is something like this (using the jQuery resize event and adding a class to the center column when the window resizes small enough):
var SMALL_WINDOW_SIZE = 560;
function checkWindowSize() {
var $content = $("#content");
if ($(this).width() < SMALL_WINDOW_SIZE && !$content.hasClass("smallWindow")) {
$content.addClass("smallWindow");
} else if ($(this).width() >= SMALL_WINDOW_SIZE && $content.hasClass("smallWindow")) {
$content.removeClass("smallWindow");
}
}
$(document).ready(function() {
checkWindowSize();
});
$(window).resize(function() {
checkWindowSize();
});
#sidebar {
background: orange;
width: 100px;
height: 200px;
position: fixed;
top: 10px;
left: 10px;
}
#content {
background: blue;
width: 300px;
height: 350px;
margin: 0px auto;
}
.smallWindow {
float: left;
margin-left: 120px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='sidebar'></div>
<div id="content"></div>
I can't help but feel there should be a pure CSS solution or one that uses less or more elegant JavaScript. Is there such a thing?
This isn't by any means the best way of achieving the desired effect with CSS, but it's the methodology behind using CSS media queries to adapt layout that I want to convey.
Obviously if this meets your needs, you'll want to adjust the numbers/widths to suit your case.
*, :before, :after{
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
position: relative;
padding: 20px;
}
.sidebar, .main {
padding: 20px
}
.sidebar {
position: fixed;
top: 20px;
left: 20px;
width: 200px;
background: goldenrod;
color: white;
height: 50vh;
}
.main {
margin-left: 220px;
background: mediumblue;
color: white;
height: 200vh;
}
#media (min-width: 1050px){
.main{
margin: 0 220px 0 220px;
}
}
<div class="wrapper">
<div class="sidebar">
Sidebar
</div>
<div class="main">
Main
</div>
</div>
» JSBin
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
How can I have a footer which always stays at the bottom of my page even if this page is too little to fill the entire screen or more ?
I have a button in my page, and when you touch it, it adds thanks to javascript many elements to my page and the page size changed, but my footer doesn't adapt its position.
The problem is when I set the position of my footer to relative, when my page size is too short, he is not at the bottom of my screen, but just under the last element I put on.
I tried position: absolute;, but when the user clicks on the button, my footer stays stuck at his position and it doesn't go to the new bottom of my page.
I don't want my footer to be always visible, but just to be at the real bottom of my page.
Use this:
footer {
position: fixed;
bottom: 0;
/* Add a height and a width! */
}
The complete solution is explained in this article: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Major trick is, that you will have three parts: Header, Body and Footer:
HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
background: #6cf;
}
Use the following
footer {
position: absolute;
bottom: 0;
}
try this one... this will keep your footer at the bottom of your page:
position: fixed;
bottom: 0;
Working demo: https://jsfiddle.net/maky/bgeLbpd9/
#footer {
position: fixed;
bottom: 0;
background-color: black;
min-width: 100%;
font-family: Agency FB;
transition: height 3s;
height: 50px;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}
Imagine an HTML page like the following one:
<body>
<div class="main">
<div class="free">aaa</div>
</div>
</body>
The free div is absolutely positioned, and its position is outside the visible area of the browser. Because of that, it will generate an overflow, and scrollbars will be shown. This is ok.
The main div, instead, should be as big as the full area inside the browser. It shouldn't be limited to the visible area.
html, body {
height: 100%
}
.main {
background-color: gray;
width: 100%;
height: 100%;
}
.free {
position: absolute;
width: 100px;
height: 100px;
left: 3000px;
top: 3000px;
}
As you can see here, http://jsfiddle.net/y79NS/12/, the gray div doesn't extend in the "overflow zone". It works if I add a static width/height to html and body elements, but I don't know in advance how much it should be big.
Is there a pure CSS solution? If not, what's the best way to do it with Javascript, keeping in mind that the user could resize the browser in any moment?
You are just missing a semi-colon in your CSS, also use negative margins if you want to hide .free:
html, body {
height: 100%;
}
body {
position: relative;
}
.main {
background-color: gray;
height: 100%;
width: 100%;
}
.free {
position: absolute;
width: 100px;
height: 100px;
left: -3000px;
top: -3000px;
}
http://jsfiddle.net/btipling/y79NS/17/