.width-100vw {
width: 100vw;
}
.height-100vh {
height: 100vh;
}
.layout {
min-width: 1000px;
}
.flex {
display: flex;
}
.justify-center {
justify-content: center;
}
.absolute-scroll-x {
overflow-x: auto;
overflow-x: overlay;
}
.width-100 {
width: 100% !important;
}
.height-100 {
height: 100%;
}
.left-side {
width: calc((7 / 16 * 100%));
background-color: orange;
}
.right-side {
width: calc((9 / 16 * 100%));
background-color: red;
}
<div class="width-100vw height-100vh flex justify-center absolute-scroll-x">
<div class="width-100 height-100 flex layout">
<div class="height-100 left-side">
</div>
<div class="height-100 right-side">
</div>
</div>
Loom link
When I decrease the screen width to 344px (in chrome dev tools), then as per dev tools, the layout div is of width 1000px (correct), left div is of width 437.5px (correct) and right div is of width 562.5px (correct).
But scrolling clearly shows that the left div is way smaller than the 437.5px. Why is it so?
Answer is very simple. You can not scroll to the left past the beginning of the page. Y-axis scrolling begins at 0 and goes on to the end of the content, if you add more content it goes further, but if you move content up with lets say top: -5000px scrolling area will not be expanded, everything below 0 just gets cut off. Same with X-axis, everything on the left below 0 gets cut off.
Your main div has justify-content: center; style which puts your layout div always in the center, no matter how big it is. When main div is smaller then layout div, since layout has min-width: 1000px; it puts it to the center and as result everything on the left gets cut off.
Main div
Layout div (centered)
Bigger than Main div. Extends to the right and left, since it is centered, but everything to the left can not be reached with scrolling. Scrolling does not go below 0.
Left side element
Is actually correct size, but looks smaller because can not be accessed via scrolling.
In your case everything can be fixed by just removing justify-center from main div.
Related
I have two divs side by side, the first on about 60% of the page is positioned as "relative" on the left, the second is placed as "absolute" on the right as it is the only way I managed to place them side by side.
The div on the right is only about 10% (measures about 1 view port height) of the full height of the webpage. The div on the left which measures roughly 10 viewport heights defines the full height of the webpage. Hence, I would like to be able to have the right div slide down as the user scrolls down so as to not leave a blank space on the right of the left div below the right div.
The issue is that I can't manage to have the right div set as sticky and scroll down and still keep them right next to eachother at the top when the page first loads. The sticky div will be on top whhile the left div starts just when the sticky div finishes. Basically it behaves the same as if I set both of them relative but I need the right divv to behave as an absolute div before it becomes sticky to preserve the positioning.
With absolute positioning:
.mainbodyfx {
width: 60vw;
padding-left: 10vw;
right: 40vw;
margin-left: 0;
margin-right: 0;
height: 10vh;
}
.floatingfxbuy {
position: absolute;
background-color: transparent;
width: 20vw;
left: 75%;
height:1vh;
}
<div> Content of full height and width slider </div>
<div class=floatingfxbuy> Right div that needs to slide down with scroll </div>
<div class="mainbodyfx"> Left div that defines the height of the whole webpage</div>
With sticky positioning:
.mainbodyfx {
width: 60vw;
padding-left: 10vw;
right: 40vw;
margin-left: 0;
margin-right: 0;
height: 10vh;
}
.floatingfxbuy {
position: sticky;
background-color: transparent;
width: 20vw;
left: 75%;
height:1vh;
}
<div> Content of full height and width slider </div>
<div class=floatingfxbuy> Right div that needs to slide down with scroll </div>
<div class="mainbodyfx"> Left div that defines the height of the whole webpage</div>
So, it's hard to tell exactly what you're asking for but I think I'm close to what you're asking for. Essentially if you want a floating side div you need to treat it as completely separate from the other div. Really as far as the css and html goes the .floatingfxbuy div is separate from the entire page.
If you want the floating div to be absolute positioned until you scroll to a certain height you need to use JavaScript to change the position to fixed for the div when the window scrolls to a certain point.
You also need to have the z-index slightly higher on the floating div so that it doesn't interact with any elements "underneath" it.
Here is a quick example I threw together. Sorry about the terrible colors.
$(document).ready(function() { // at document ready run this function
var $window = $(window); // local variable to window
$window.on('scroll resize', function() { // on window scroll or resize run this function
if ($window.scrollTop() > 50) { // if the top of the window is lower than 50px then add the fix class to the .floating-side-div
$('.floating-side-div').addClass('fix');
} else { // if the top of the window is heigher than 100px remove the fix class
$('.floating-side-div').removeClass('fix');
}
});
});
body {
margin: 0;
/* get rid of some default body styles */
}
.page-container {
min-height: 200vh;
/* set height of page so we can scroll to test */
width: 100%;
background-color: green;
}
.content-div {
width: 60vw;
/* width you suggested */
height: 50vh;
/* random height for content */
margin-left: 10vw;
/* some left margin you want */
background-color: red;
}
.floating-side-div {
height: 10vh;
/* 10% viewport height like you want */
width: 20vw;
/* width you have in your css */
background-color: blue;
position: absolute;
/* to start we want absolute position */
right: 0;
/* put it at the right of the page */
top: 0;
/* put it all the way at the top. you can change this if you want */
z-index: 99;
/* increase z-index so we're over top of the other elements on the page and don't distort the page when scrolling */
}
.floating-side-div.fix {
position: fixed;
/* change from absolute to fix so we 'fix' the div to a spot in the viewport. in this example top: 0, right: 0; */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
<!-- our page container -->
<div class="content-div"></div>
<!-- the content div(your .mainbodyfx) -->
<div class="floating-side-div"></div>
<!-- the floating div(your .floatingfxbuy) -->
</div>
Here's the example of what I have so far:
https://codepen.io/anon/pen/jQZpNw
My objective is to center that box in the middle to the center of the page, and have the rest of the elements respond appropriately. I've ended up using margin-top: 10%; as a way to center the box, but the problem with this approach is that on smaller browser heights users will have to scroll. It's also not perfectly centered.
Ideally, what I'm looking for, is to:
Center the box (vertically and horizontally)
On small browser heights the center box should sit just underneath the navbar with a small margin, to eliminate the scrolling on small browsers.
Sticky the footer with a gap between the footer and the box when the browser height is really small.
When the center box expands its contents or the navbar expands its contents everything else should move appropriately and not overlap.
I made some javascript buttons to expand the navbar and centerbox so it's easier to experiment with. My actual app is obviously different, this is a stripped down version of what I have.
I tried a bunch of different things to get this to work with no luck, when I used calc() to set it to the center on small browser heights the footer or navbar would overlap the box. I'm out of ideas now, and CSS is not my strong suit. Thanks!
You can try a full page wrapper with a header, the footer, and the div you want centered. Using display:flex; with the flex-direction set to column and justify-content: space-between; you can basically center the div. It will be off a little bit if your header and footer are different sizes but you won't need a ton of media queries or code that is hard to maintain. Set the min-height of the wrapper to 100vh and your footer will be sticky, unless the window is too short to fit all of the pieces.
$('#nav-button').on('click', function(e) {
e.preventDefault();
$('#nav-content').toggleClass('expand');
});
header {
background: red;
padding: 5px;
}
header a {
color: white;
}
#nav-content {
height: 0;
transition: height .3s;
}
#nav-content.expand {
height: 300px;
}
footer {
color: white;
background: red;
padding: 5px;
}
#centered-box {
height: 200px;
width: 200px;
background: green;
margin: 10px auto;
}
#wrap {
min-height: 100vh;
display: flex;
justify-content: space-between;
flex-direction: column;
}
body {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<header>
<nav>
Expand
<div id="nav-content"></div>
</nav>
</header>
<div id="centered-box"></div>
<footer>This is the footer</footer>
</div>
Are you using media queries at all in your CSS? Media queries allow you to style elements a certain way if the browser window size falls within the query.
How can I have a div with height 100% filling the viewport AND a second div (positioned absolute) covering the entire page (a dropdown)?
More info: I have a div on my homepage containing a hero image. The div needs to fill the viewport. Below the hero div is more content. I have the following code:
html { height: 100%; }
body { height: 100%; }
.hero { height: 100%; }
I would prefer to use height:100% than height:100vh because on tablets and phones (in Chrome) the viewport height changes when scrolling and in iOS Safari the bottom of the hero div is hidden behind the apps controls (bookmarks etc) when using 100vh.
The above works fine for the hero image div. BUT I have a drop down menu/nav bar. The dropdown needs to have a height of the entire page, not just the viewport. The menu has an absolute position. If I set the height to 100% it only covers the viewport height, not the entire page. The same is true if I set top:0; and bottom:0;.
How can I do this? Thank you
First pic shows the hero div in blue with a height of the screen (minus the header). There is more content below the 'fold'.
Second pic show the drop down menu which should cover the entire height of the page. Hence the white drop down will have considerably more height than just the hero div.
The inner element's height 100% means it will occupy its container. If you want to occupy the entire page, you have to use top:0, left:0 and in JavaScript, use innerElement.style.height=document.body.style.height;
Previous snippet might not work
You should use clientHeight
innerElement.style.height=document.body.clientHeight
You can use 'vh' and 'vw' instead:
100vh - 100 virtual height %
100vw - 100 virtua width %
You can use this:
function openMenu(){
document.getElementById("ddl").style.display = "block";
}
function closeMenu(){
document.getElementById("ddl").style.display = "none";
}
body{
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 50px;
position: relative;
width: 300px; /*for test */
}
.menu{height: 50px;} /* first child of body */
.hero{
flex: 1;
background-color:#4de6d0;
min-height: calc(100vh - 50px); /*for test */
} /* second child of body */
.dropDown {
position: absolute;
min-height: calc(100% - 50px);
top: 0;
background-color:white;
display: none;
width: 80%;
}
.dropDown > div{
height: 60px;
text-align: center;
line-height: 60px;
}
<body>
<div class="menu" onclick="openMenu()">Menu</div>
<div class="hero"></div>
<div class="dropDown" id="ddl">
<div onclick="closeMenu()">Close</div>
<div>Work</div>
<div>About</div>
<div>Services</div>
<div>Ethics</div>
<div>Contact</div>
</div>
<body>
Finally I did not understand what you exactly want, But if you want the drop down is the height of screen you can change this property:
min-height: calc(100% - 50px);
to this: calc(100vh - 50px);
In .dropDown styles
From exhaustive research it doesn't seem possible to have one div with a height of 100% to fill the height of the screen and a second div with height 100% to cover the height of the enire page.
http://jsfiddle.net/yLhh3/
I have three columns in a deadly simple CSS layout. They look perfect until content is added to one of them thus forcing the page to scroll (scroll down on the fiddle).
All I want is for the red boxes to ALWAYS go to the bottom of the page (not the window / screen, the page). How can this be accomplished with CSS?
.column
{
background-color: red;
width: 400px;
/* Page height minus header */
min-height: calc(100% - 192px);
/* Align to bottom of the page */
position: absolute;
top: 192px;
}
/* Half the page width minus (1.5 columns + offset between columns) */
.left { left: calc(50% - 630px); }
.right { right: calc(50% - 630px); }
/* Half the page width minus 0.5 columns */
.center { left: calc(50% - 200px); }
There has always been issues and questions about this and there are many ways to go about it, but the easiest, since your using absolute positioning, it to wrap the "column" divs inside the "center" div.
<div class="column center">
<div class="column right"></div>
<div class="column left"></div>
</div>
This allows the left and right divs to strech to 100% of the parent, the center. Some minor changes to the css, as you can see in the fiddle, like height: 100% and top: 0 for the contained columns since the parent top is considered 0 for the children.
jsfiddle
I hope I understand what you are trying to achieve.
I've used overflow: scroll; so you would not lose the content (You can set it to only Y if you want or hidden).
I've also used height since with min-height the overflow didn't triggered
.column
{
background-color: red;
width: 400px;
/* Page height minus header */
height: calc(100% - 192px);
/* Align to bottom of the page */
position: absolute;
top: 192px;
overflow: scroll;
}
I have a page which is divided up into 3 divs, left center and right. I don't want to display anything in the left and right, they just frame the page.
#leftDiv
{
background-color: Gray;
width: 10%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
}
#rightDiv
{
background-color: Gray;
height: 100%;
width: 10%;
left: 90%;
top: 0px;
position: absolute;
clear:both;
}
The center div has a table, which allows the user to select how many rows to see. If they chose a large value then the body of the table went beyond the bottom of the left and right div.
To correct this I put the following code in
if ($("#leftDiv").length == 1) {
$("#leftDiv").height($("body").height() + "px");
}
if ($("#rightDiv").length == 1) {
$("#rightDiv").height($("body").height() + "px"); ;
}
this works fine until the user selects a smaller value than the page size, after selecting a larger value.
Then the left and right divs get set to less than 100%.
What i need is a way to find out what 100% is in pixels and then I can compare this to the height of the body and decide which is bigger.
Any ideas?
Thanks
John
Use margin: 0 auto
Kill your left and right columns, give your main div a width, and then center that div using an auto left and right margin. For example:
#mainDiv {
width: 80%;
margin: 0 auto;
}
Why are you creating empty elements to frame the page? How about setting the body background to the colour you require and:
#center_div {width: /* whatever */;
margin: 0 auto; /* to center in the viewport */
overflow: auto; /* or visible */
}
You could leave off the overflow property, and simply use min-width in place of width (I can't remember how cross-browser compatible this is) to define the 'normal' width, in such a way that the content will force the div to be larger as required to display the content.
If the left and right divs don't have any contents, then there's no need for them to be separate divs: apply their formatting to your container div instead, and center your contents div using margin: 0 auto. Obviously, you'll need to give the container div a specified width, and a non-transparent background. Then you can let the browser take care of resizing the window as needed - there's no need for you to reinvent the wheel for that part.
CSS:
#container {background-color:gray;}
#content {background-color:white;width:80%;margin:0 auto;}
Html:
...
<body>
<div id="container">
<div id="content">
...your content here...
</div>
</div>
</body>
...
(If your page doesn't have a container div, then you can apply the background color to the body element instead, and save even more code.)