I'm trying to make a fixed position div stuck to the bottom of the page, that has the starting height, 70% of the screen ( like vh ).
I will make it resizable with jQuery resizable.
The problem is that if I apply height: 70vh or height: 70%, the div resizes when the user resizes the browser height, and I want to keep it the same.
Any idea what to do?
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
background-color: red;
}
<div>
</div>
View the snippet in full page.
vh or % will be relative to the height of the viewport or screen height. So we need to set the initial height of the div with JavaScript on DOM load.
Next (The resizing part) can be done with CSS resize property.
**PS: In the div bottom right corner you can see the resize icon and do the resizing.
document.getElementById("demo").style.height = window.innerHeight*.7+"px";
div {
position: fixed;
bottom: 0px;
width: 500px;
background-color: red;
resize:vertical;
overflow:auto;
}
<div id="demo"></div>
You can add min-height to div so that it will not resize itself beyond a specific height.
Like this
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
min-height: 500px;
background-color: red;
}
<div>
</div>
Related
I want to create a left navigation bar with the position: fixed attribute so that it stands in place as we scroll down.
I have .fullPage div with display: flex to show these divs horizontally.
When I add position: fixed attribute to the left-navbar, second div container-fluid-center takes 100% of browser's width instead of 100% of available space.
<div class="fullPage">
<div class="left-navbar">
</div>
<div class="container-fluid-center">
</div>
</div>
.fullPage {
width: 100%;
height: 100%;
position: relative;
}
.fullPage .left-navbar {
width: 88px;
height: 100vh;
background: #fff;
border-right: 1px solid #e4e4e4;
position: fixed;
}
.fullPage .container-fluid-center {
width: 100%;
height: 100vh;
}
As per MDN documentation, with position set to fixed "The element is removed from the normal document flow, and no space is created for the element in the page layout.".
In order to fix your issue, you can give to .container-fluid-center a margin-left: 88px;, so that it will not "overlap" with .left-navbar
When you give position:fixed to the .left-navbar
A position:fixed element does not leave a gap in the page where it would normally have been located.
So You need to .fullPage .container-fluid-center give width like this
.fullPage .container-fluid-center {
width: calc(100% - 88px);
height: 100vh;
}
So it is worked as you need
I would appreciate some wisdom here: I have 2 divs side by side each with a width of 50% of its parent div (body set at 200%) - to act like seperate horizontal pages. I would like each div to remain in full view when reducing and expanding the browser window. Currently by expanding the window size when the blue div in viewable the red div gets dragged into view as the scrollbar moves towards the centre of the browser.
body {
position: relative;
width: 200%;
height: 100%;
}
.block1 {
position: absolute;
width: 50%;
height: 100%;
background-color: #B00;
min-height: 800px;
left: 0px;
}
.block2 {
position: absolute;
width: 50%;
height: 100%;
background-color: #00A;
min-height: 800px;
left: 50%;
}
<body>
<div class="block1">
</div>
<div class="block2">
</div>
</body>
why not making only one div to be displayed and you add a button or something after clicking it will add some styling effect to hide the visible div and show the hidden one?
<div class="ui-datatable-scrollable-view" style="
width: 100%;
position: relative;
">
<div class="ui-widget-header ui-datatable-scrollable-header" style="position:fixed;top:50px">
</div>
</div>
I have a div element which is stick on the top of the page. I have given the css as
width: 100%;
position: fixed;
z-index: 2;
But it is not taking the width.
I tried several ways to do that.
I tried making the parent div as position:relative but that is not working;
I think my element is taking the width equal to the width of screen.I tried giving the fixed width to it to fit the required size. But on change of screeen size it won't work proper.
I want it to take the width of its parent.
I just tried using your css and it works for me
HTML
<div class="container"></div>
CSS
.container {
width: 100%;
height: 100px;
position: fixed;
z-index: 2;
background-color: black;
}
Check if your html and body elements have a width of 100%
Link to codepen: https://codepen.io/athapliyal/pen/VzqyBX
#test {
width: 100vw;
position: fixed;
z-index: 2;
height: 50px;
background-color: blue;
}
<div id="test">
If you provide the width as percentage it is relative to the parent of the div, so you could define the parent with a width of 100% to make it working. To provide you an example we would need more code.
So the other solution is by defining the width with 100vw.
1vw = 1% of viewport (window) width.
This way it will be relative to the viewport and doesn´t care about the parent.
For the height you can use: vh (Viewport height)
I believe that the width is in fact 100%, however since you did not set a height, it appears invisible.
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
width: 800px;
background-color: grey;
height: 600px;
}
.child {
position: fixed;
background-color: blue;
width: inherit; height: 100px;
}
I am attempting to create a game where the first thing that the user sees is a start-menu modal on top of a game background.
Basic HTML:
<div class="game-board">
<div class="menu"> </div>
</div>
CSS:
html, body{
min-height:100%;
}
.game-board{
background-image: url(../images/sand.png);
width: 1260px;
height: 100%;
}
.menu{
position: absolute;
width: 400px;
right: 0;
top: 30%;
left: 31%;
background: whitesmoke;
border-radius: 4px;
}
I expected the above code to show the background-image in the background, and then somewhere near the middle of the image, the "modal" is above the background. However, for some reason that I'd love to know, the parent div .game-board is collapsed with no height and thus no background image, but the modal appears fine. Why is this?
Rule - For height in percentage to work in CSS, the parent element should have a height that can be calculated.
For example, when you say .game-board should have a height of 100% - then the question that arises is 100% of what? Because the parent element body in this case, does not have height specified explicitly. Min-height does not work because that does not fix the height of the element to a particular value on a particular view port. For example, if the viewport has height 100px then min-height: 100% could mean anything from 100px to infinity. Thus the height rule on .game-board doesn't work.
To fix this, change min-height to height
html, body {
height: 100%;
}
Also, the absolutely positioned menu, needs to have a height if there is no content as of yet inside it, else it would not appear.
Here is a working fiddle. http://jsfiddle.net/8dhfac8w/
.game-board needs a fixed height. .menu can do with a variable height so long as it's contained by a fixed height parent. This works (Fiddle).
html, body{
min-height:100%;
}
.game-board{
background-image: url("http://trikkiworld.com/images/bg/bg_sand/25012011/sand006.jpeg");
width: 200px;
height: 200px;
}
.menu{
position: relative;
width: 50%;
height: 50%;
top: 25%;
margin-left: auto;
margin-right: auto;
display: block;
background: whitesmoke;
border-radius: 4px;
}
I'm trying to solve the problem showed on the picture.
I have a site of a width of 980px (margin:auto) centered in the middle of the page and I need surrounding background of a width of 400px each side. But when user narrows the width of the browser the background shouldn't affect horizontal bar (only the width of the page itself 980px)
Plus there's an image which is placed 80% in the main page and the rest outside of the page. I also want this piece of the image (20%) not to affect the horizontal bar when user narrows the width of the window.
THANKS!!!
image:
http://tinypic.com/r/ri58io/8
code: link to fiddlehttps://jsfiddle.net/c0ro66s4/
The thing with this design is that the 'background' boxes have a fix width. When the fill the rest of remaining width (next to the content) no scrollbar appears (at least, not in Firefox).
So what I've did is made a media query. When the screen size is bigger than (980+400+400=) 1780px the boxes will have their normal width. As soon as the screensize becomes under the 1780px, the width will be set to auto and we use the 'left' position, which makes them fill the screen and won't show the scrollbars.
I made the testcase in JSFiddle with half the sizes (otherwise it wouldn't fit on my screen).
<div id="content">Content</div>
<div id="bgLeft"> </div>
<div id="bgRight"> </div>
body, html { margin: 0; padding: 0; min-height: 100%; }
#content {
background: lightblue;
position: absolute;
width: 490px;
height: 100%;
left: 50%;
margin-left: -245px;
}
#bgLeft {
background: lightgreen;
position: absolute;
width: 200px;
right: 50%;
margin-right: 245px;
height: 100%;
}
#bgRight {
background: lightgreen;
position: absolute;
width: 200px;
left: 50%;
margin-left: 245px;
height: 100%;
}
#media screen and ( max-width: 890px ) {
#bgLeft {
width: auto;
left: 0;
}
#bgRight {
width: auto;
right: 0;
}
}
Set the image as background in both boxes and a align the one in the left box on the right and the one in the right box on the left.
DEMO
EDIT
Added your background-images: DEMO 2