I have problem, I have one fixed container, inside them I have absolute div, I want to set .absolute div height:100%; to be full height of container div(500px).
Here is what I tried to solve my problem, this need because I want to create mobile menu with toggle container, and its important for me to be height 100% of mobile phone screen.
https://jsfiddle.net/d1bh9ncs/
HTML
<div class="container">
<div class="fixed">
<div class="absolute">
</div>
</div>
</div>
CSS
.container{
width:100%;
height:500px;
background-color:#ddd;
}
.fixed{
position:fixed;
width:100%;
height:50px;
background-color:red;
top:8px;
left:8px;
right:15px;
}
.absolute{
position:absolute;
height:100%;
width:100%;
background-color:green;
top:51px;
left:0px;
}
The parent div .fixed is absolutely positioned and has a height 50px. So applying height: 100%on it's child will inherit the relative height(i.e 50px).
Use height: 100vh; on .absolute. I have used calculated height height: calc(100vh - 51px) to avoid scrollbar due to top: 51px.
Note: vh is 1/100th of the height of the viewport(visible webpage height).
Updated Fiddle
.absolute {
position: absolute;
height: calc(100vh - 51px);
width: 100%;
background-color: green;
top: 51px;
left: 0px;
}
you are using Fixed div as an Parent div of Absolute div, Absolute div can have 100% of Fixed div it can't extend to its parent's height if you add height value in Percentage.If you want it to extend as parent height you must have to add height in px (pixels)
.container{
width:100%;
height:500px;
background-color:#ddd;
}
.fixed{
position:fixed;
width:100%;
height: 101px;
background-color:red;
top:8px;
left:8px;
right:15px;
}
.absolute{
position:absolute;
height: 117px;
width:100%;
background-color:green;
top: 0px !important;
left:0px;
z-index: 99999999;
top: 50px;
}
Try to give height in vh. Put .absolute height = 100vh
.absolute
{
position:absolute;
height:100vh;
width:100%;
background-color:green;
top:51px;
left:0px;
}
https://jsfiddle.net/bj9wcdLs/
A more modern way of doing this is to use vh and vw (view height and width). Which rather than being a percentage of its parent (like %) is a percentage of the full page.
In the example below I've done some calc's to help it work out what sizes we really want things.
example = function() {
var abSel = document.querySelector(".absolute");
abSel.classList.toggle('hidden');
}
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background-color: #ddd;
}
.fixed {
position: fixed;
width: calc(100vw - 16px);
height: 50px;
line-height: 50px;
text-align: center;
background-color: red;
top: 8px;
left: 8px;
}
.absolute {
position: absolute;
border-top: 1px solid #ddd;
height: calc(100vh - 59px);
width: calc(100vw - 16px);
background-color: green;
top: 50px;
}
.hidden {
display: none;
}
<div class="container">
<div class="fixed">
<button onclick="example()">Example</button>
<div class="absolute hidden"></div>
</div>
</div>
Hope this helps.
Just like sticksu said.
Change your code
.fixed{
position:fixed;
width:100%;
height:100%; //must be 100%
background-color:red;
top:8px;
left:8px;
right:15px;
}
Related
I have to make a div follow an image and sit on its center vertically and horizontally when responsive. I simply have no idea or don't think whether it is possible only by css. Any help is appreciated
.imageWrapper {
height:200px;
width:200px;
position:relative;
margin:50px auto 0px auto;
}
.imageWrapper > div:first-child {
position:absolute;
z-index:1;
top:0px;
left:0px;
right:0px;
bottom:0px;
overflow:hidden;
}
.imageWrapper > div:first-child img{
height:200px;
width:100%;
object-fit:cover;
position:relative
}
.imageWrapper > div:last-child {
position:relative;
z-index:2;
text-align:center;
line-height:200px;
height:200px;
width:100%;
}
<div class="imageWrapper">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Billede_084.jpg"></div>
<div><p>bla bla</p></div>
</div>
make a wrapping div, make the image absolute as a background and place the text in front of the image.
Well you can make good use of an old trick to center element using position property.
as usual an example is better than an explanation.
.html
<div class="parent">
<div class="child"></div>
</div>
.css
.parent {
position: relative;
width: 100%;
height: 200px;
background-color: lightblue;
}
.parent .child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background-color: grey;
}
body{
max-width:1366px;
}
.gotop{
position:fixed;
right:9px;
bottom:7px;
cursor:pointer;
width:25px;
}
gotop is a button to scroll page on top and it must not be scrollable, i.e. must be fixed.
Problem is on monitors greater than 1366 px. The button is far right from the body.
How to keep it fixed, but inside body?
One possible solution is to omit top, right, bottom, left values for the fixed button. This way it will be sticked to the container:
.container {
position: relative;
max-width: 800px;
height: 200vh; /* for scrolling demo */
margin: 0 auto;
border: 1px solid black;
}
.button-wrapper {
position: absolute;
right: 35px; /* button width plus margin */
top: 30%; /* or whatever you need */
}
.button {
position: fixed;
width: 25px;
height: 25px;
cursor: pointer;
background: black;
}
<div class="container">
<div class="button-wrapper">
<div class="button"></div>
</div>
</div>
Try This
body{
max-width:1366px;
background:#f1f1f1;
}
.gotop{
position:absolute;
right:25px;
bottom:25px;
cursor:pointer;
}
<body>
<button class='gotop'>TOP</button>
</body>
I wouldn't recommend using max-width on the body... you should put it on a div that wraps everything in the page instead.
Then place your button at the bottom of wrapper with the following CSS applied. Tweak the values to get a better position if you need it.
.wrapper{
position: relative;
height:200vh;
width: 100%;
max-width:400px;
background: #000;
}
.holder{
position: absolute;
top:92.5%;
right:0;
background: #ccc;
}
.button{
height:30px;
width: 70px;
position: fixed;
margin-left:-70px; /* minus width */
bottom:10%;
}
<div class="wrapper">
<div class="holder">
<button class="button">Test</button>
</div>
</div>
What you asking is rather an old way of doing things but it can be achieved.
Set the width of body.
Set fixed element to center.
Offset center by width of body and fixed element.
html,
body {
position:relative;
height: 100%;
max-width: 200px;
margin: 0 auto;
border:1px solid #111;
}
.gotop {
position: fixed;
left:50%;
bottom: 7px;
cursor: pointer;
width:40px;
background:#eee;
margin-left:60px;/*half width of body minus width of gotop*/
}
<div class="gotop">TOP</div>
I want to position my anchor to middle (vertical) inside a fixed div.
I can't use display:table/table-cell because of other content inside my div, so I thought line-height would be the best alternative.
My problem is that the anchor will stretch out when I put line-height with it, but only if it's floated.
HTML:
<div class="fixed">
<a class="btn" href="#">btn1</a>
</div>
CSS:
.fixed
{
height: 100px;
width: 100%;
background-color:grey;
position:fixed;
}
.btn
{
padding: 3px 9px;
background-color:red;
color:white;
line-height:100px;
float:right;
}
JSfiddle: https://jsfiddle.net/828zrzrk/
add display:block;
change padding value.
.fixed
{
height: 100px;
width: 100%;
background-color:grey;
position:fixed;
top:0;left:0;
}
.btn
{
display:block;
padding: 0 9px;
background-color:red;
color:white;
line-height:100px;
float:right;
}
<div class="fixed">
<a class="btn" href="#">btn1</a>
</div>
is this what you need?
```
.btn {
**
width: WIDTH;
height: HEIGHT;
position: absolute;
left: 50%;
top: 50%;
margin-top: -WIDTH/2;
margin-left: -HEIGHT/2;
}
```
Demo
I need the following to happen in my website:
The counter and logo (top, bottom) should always have the same height and stay on the top and bottom even though the screen height will decrease/increase. BUT the 2 other divs in between should get smaller/bigger when the window changes. I hope with this example its easier to understand:
The logo will disappear when the screen height is too low, right now. Here is the css:
The section is 80% width and aside 20%, but that doesnt really matter here...
#countdown{
padding: 0.5em 0.5em 0.5em 3em;
margin: 0.5em;}
#addProject{
margin: 0.5em;
padding: 0 1em;
height: 44%;
overflow-y: auto;}
#Nye{
margin: 0.5em;
padding: 0 1em;
overflow-y: auto;
height: 40%;
}
#logo{
margin: 1em;
height: 5em;
}
#Rémi offered a good start, but I would recommend using position: fixed.
This will anchor your elements to the browser window, regardless of the amount of your content.
e.g.:
.counter, .middle1, .middle2, .logo {
position: fixed;
width: 20%;
min-width: 200px;
right:0;
}
.counter {
background: yellow;
top:0;
height: 50px;
}
.middle1 {
overflow: scroll;
background: blue;
top:50px;
bottom: 50%;
}
.middle2 {
overflow: scroll;
background: green;
top: 50%;
bottom:50px;
}
.logo {
background: pink;
bottom:0;
height: 50px;
}
See http://jsfiddle.net/uKPEn/1/
It's a little tricky but I discovered by doing it that it is actually doable without javascript. Here is a fiddle to illustrate it http://jsfiddle.net/2LyUy/3/
You have to do 3 things:
wrap your two middle divs in a new div, for example with id="wrap".
put a different position attribute on your aside (for example "relative", which will actually not move your div at all)
then have fixed size counter and logo
The css gives that (don't forget to wrap your 2 middle divs with a new one):
aside#test { position: relative; }
/* so that the "absolute" below work as expected */
/* any of "relative" "absolute" or "fixed" positioning would work here, depending on the needs */
#countdown {
position: absolute; left:0; right:0; /* could be factored out if preferred */
top:0; height: 150px;
}
#logo {
position: absolute; left:0; right:0;
bottom:0; height: 50px;
}
#wrap {
position: absolute; left:0; right:0;
top:150px; bottom: 50px;
}
#addProject {
position: absolute; left:0; right:0;
top:0; height:50%;
}
#Nye {
position: absolute; left:0; right:0;
bottom:0; height:50%;
}
Here is the div wrapping code extract:
</div></div>
<div id="wrap"> <!-- added -->
<div id="addProject"
....
<br>
</div>
</div> <!-- added -->
<div .... id="logo"></div>
Just tired up with the problem with 2 div aligning vertically. I tried horizontal scroll is appear in browsers, how to get rid of scroll?
I have this html:
<div id="responsive-admin-menu"></div>
<div id="content-wrapper"></div>
The css code is
#responsive-admin-menu {
width: 200px;
left:0px;
background-color: #404040;
height: 100%;
position: absolute;
min-height: 500px;
}
#content-wrapper {
position:absolute;
overflow:auto;
width:100%;
margin-left: 200px;
right:200px;
background-color: #fff;
padding: 15px;
}
I assume you want to create a two columns fluid layout, where you have your #responsive-admin-menu to the left and #content-wrapper to the right, and they fill the entire browser window.
In this case I suggest to define the width of both divs in percent and let them float one to the left and the other to the right:
#responsive-admin-menu {
width: 30%;
float:left;
}
#content-wrapper {
width: 70%;
float:right;
}
take a look here where I edited your code.
My Codepen
Use left/top/right/bottom for to give "anonymous" width and height.
Your CSS
#responsive-admin-menu {
position: absolute;
width: 200px;
left:0px;
top:0px;
bottom:0px;
background-color: #404040;
min-height:500px;
}
#content-wrapper {
position:absolute;
overflow:auto;
top:0px;
left:200px;
right:0px;
background-color: green;
padding: 15px;
}