I have a modal that should always appear at the bottom of the page. But, whenever its height exceeds the screen height, its top region is cut off. I want to prevent that. Here is the simplified version of the code.
<div class="modal">Modal</div>
.modal{
position: absolute;
width: 440px;
height:700px;
z-index: 9999;
background-color: #ffffff;
right: 20px;
bottom: 20px;
border: 1px solid #dbdbdb;
}
This is what max-height is for. Add this to your modal styling:
max-height: calc(100vh - 20px);
In this example I am subtracting the 20px that you are spacing from the bottom from the height of the screen (100vh). Feel free to adjust as needed.
If the height of your modal gets shorter than its content you need to add:
overflow-y: scroll;
Related
I'm new to CSS.
trying to study some layouts and ran into this issue.
in HTML. I've got
<div id="wrapper">
<aside id="sidebar" class="left">
</aside>
<div class="content">
Lorem ipsum blah blah (cutted: about 100lines)
</div>
<aside id="sidebar" class="right">
</aside>
</div>
I'm trying to prevent the left and right sidebar(aside) from scrolling. No matter how much I scroll the main, it will always stay there; I've set its position to fixed and it looked all fine. the issue is, the main content is overlapping with the right sidebar(aside) when resizing. I've tried position: relative and absolute to the right and changing it to div but nothing happens.
the goal is - when my chrome browser shrinks, it should show the Horizontal/vertical scrollbars without any overlapping of main contents. no matter how long my main content is, the sidebars should always be there! Thank you in advance!
CSS below
body, html {
font-family: Helvetica;
background-color: rgba(0, 0, 0);
}
#sidebar {
position: fixed;
width: 400px;
height: 100%;
margin-top: 120px;
top: 0;
}
.left {
left: 0;
bottom: 0;
background-color: rgb(82, 50, 50);
}
.content {
display: inline-block;
background-color: rgb(255, 255, 255);
margin-top: 120px;
top: 0;
width: 800px;
height:100%;
margin-left: 400px;
margin-right: 400px;
}
.right {
right: 0;
bottom: 0;
background-color: rgb(255, 217, 0);
}
#wrapper {
margin-left:0;
margin-right:0;
max-width: 1600px;
border:1px solid white;
}
You need to give the .content a dynamic width instead of the static one you've set.
Try this
.content {
width: calc(100% - 400px - 400px); /* where 400px and 400px are the width of the sidebars */
}
The problem is you are using position: fixed and you are using px:
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
By using the px, the element size will always be 400px even though the window size is very small. To prevent the content from overlapping to others and keep the same ratio with other elements, you should use % which is the percentage for the container's size and it will keep the same ratio between the aside and div no matter the window size.
Another soluation is to you media screen
The #media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
Check more here
If you want to prevent aside from scrolling, just use:
aside{
overflow: hideen
}
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>
I'm trying to achieve an example as shown on this site. Click on the "Projects" button on the top right corner below the main menu to reveal the container I am interested in replicating.
When stretching the webpage from left to right and top to bottom, that project pop up is responsive and the padding around the page keeps the same value. I was able to get my width responsive but cannot figure out how to get the same thing for my height since I don't have a specific value for my height. I want the box in my site to be responsive on bigger computer screens than what I am using right now (15" macbook pro) because right now it only takes up half the screen on a bigger monitor.
Here's my code:
nav {
/* max-width: 1266px; */
width: 87.92%;
margin: 50px auto 23px auto;
height: 40px;
background-color: pink;
}
.content {
/* width: 1266px; */
width: 87.92%;
height: 540px;
margin: 0px auto 0px auto;
background-color: aquamarine;
}
<nav>
</nav>
<div class="content">
</div>
Try here.
I want there to have 50px padding at the top and bottom of the webpage even as you shrink the page top to bottom. Right now my nav has a margin-top of 50px, but ideally, I'd like the entire page to have a padding of 50px at the top and bottom. I just don't know how to go about this and I can't seem to find an answer anywhere!
Thank you!!
You can use calc() for this:
height: calc(100vh - 163px);
100vh = total height of screen
163px = 113px + 50px
(113px is the height of your nav with margins and 50px is the distance to the page bottom)
There are several ways to do. One way is to use fixed or absolute positioning. The page http://kokopako.fr/profile fixes the position. Notice that the body in that page no longer scrolls when the Projects menu is open. This is something you need to enable using JavaScript.
So, imagine originally the body is tall and only the navigation is visible at the top:
body {
height: 1900px;
}
nav {
height: 40px;
background-color: pink;
width: 87.92%;
margin: 50px auto 23px auto;
}
.content {
background-color: aquamarine;
display: none;
}
Then when you click no "Projects" button, you would add an extra class, say projects_visible to body so that it doesn't scroll.
.projects_visible {
overflow: hidden;
}
Then the navigation and the content would display automatically with fixed position.
.projects_visible nav {
position: absolute;
top: 50px;
right: 50px;
left: 50px;
margin: 0;
}
.projects_visible .content {
display: block;
position: absolute;
bottom: 50px;
top: 123px;
right: 50px;
left: 50px;
}
The right side of the container runs out of the browser and a scroll-bar shows up.
How can i adjust to be just fit in the browser?
And the bottom does not reach the bottom of the browser... Any idea?
.container {
border: 1px solid #ffffff;
margin-top: 60px;
margin-left: 200px;
min-width: 100%;
min-height: 100%;
position: absolute;
}
You have set min-width: 100% AND margin-left: 200px which ends up in a total of 100% + 200px, which ends with a horisontal scrollbar.
If you WANT the margin, AND the size to be the rest of the size of the window, you can do this: max-width: calc(100% -200px); and just keep the rest the same.
Only works in relatively new browsers.
if You Use border with width:100% then you have to use box-sizing:border-box;
position: absolute;
top: 60px;
left:0px;
min-width: 100%;
min-height: 100%;
border: 1px solid #ffffff;
background:red;
box-sizing:border-box;
Use min-width: calc(100% - 202px); to include the margin and borders you defined in the width.
For height, make sure all parent elements have defined heights, which can also mean you have to add body, html: height: 100%; . In this case also add box-sizing: border-box;, but then the width setting above should be min-width: calc(100% - 200px);, since border-box already includes the border in the width.
I'm making a single page website, so it is a long page.
But I want to make a first div which is full height and full width of the page, and has a logo centered. Then I want to put divs below it with fixed heights.
So when the page is opened, the logo is always centered, and the div below is not yet visible (because the first takes full height). And when they start scrolling, the next div is right under it and shows up.
Is this even possible? I tried looking for this but found nothing.
Thanks
Max
Here you go: http://jsfiddle.net/BramVanroy/NMeAQ/
html, body {
width: 100%;
height: 100%;
}
#logo {
width: 100%;
height: 100%;
background: #ccc;
}
#logo > img {
border: 10px white solid;
left: 50%;
margin-left: -130px; /* the width of your image divided by 2 */
top: 50%;
margin-top: -130px; /* the height of your image divided by 2 */
position: absolute;
}