I'm creating a horizontal animated page transition system where the screen scales to accomodate the incoming page. The problem I have is when moving to a smaller page size, the previous (larger) page overflows out of my content wrapper and consequently causes my overall page to extend past the footer. This screen capture shows my problem.
You can see how the current page exits on the left, after the screen has shrunk to accomodate the incoming smaller page. (the yellow is the footer, the white the unwanted screen extension).
Currently my "page" css is
.myPage
{
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0;
left: 0;
display:none; /*Pages are displayed once called*/
opacity: 1;
}
I've attempted fiddling with overflow-y:hidden which I thought might work but no such luck.
What can I do to keep my page class from extending out of my content and screwing up my page?
EDIT:
Here's the page wrapper.
.pageWrapper
{
background: #FF0000;
position: relative;
width: 100%;
height: 100%;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
-webkit-transform: translateX(0%);
}
Edit2: A jsfiddle thats broken but features all my code
overflow-y won't work without a fixed height. Try setting the height to 100% or some other value that looks right.
In this case you could also set bottom instead of height to give the element a fixed height.
Related
I have a project using Bootstrap 3 where I need to place a sidebar over the sections with content, but respecting the width of the .container wrapper. The sidebar must fill the full page height and be scrollable.
This JSFiddle (link in comments because I can't post more than 2 links yet) shows the structure I have, with their styles. You can see the issue by playing with the height of the HTML frame on JSFiddle, making it smaller than the page height.
To better illustrate, these images show the sidebar in blue, filling all the page height, in all cases:
Case 1: the sections are taller than the viewport; the sidebar follows the body height
Case 2: the sections doesn't fill all the page, but the sidebar does
Note: it's important that the sidebar follows the width of .container. The content below doesn't, it is full width and partially visible.
Bonus: in Case 2, the section should be full height as well
I tried to give the more details I could, but I can provide any additional info.
I know it's possible through script, but I'd prefer using just CSS
It's kind of hard to help with out more details. But I went ahead and made this fiddle that has a 100% height colored background using your markup: https://jsfiddle.net/stevenng/8xdfosf6/
.container {
width: 100%;
}
.sidebar {
background: #bada55;
float: left;
width: 25%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
}
.sections {
background-color: #b000b5;
width: 75%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
Hope this helps!
This site is full-width and adapts to the size of the browser window. However, once the browser window is smaller than the content displayed, the title gets cut off once you scroll to the right.
The default width of 100% seems to be working for the width of the browser window only, not the width of the page! The same also seems to apply on the vertical axis.
Example
#title
{
height: 50px;
color: white;
background-color: #404040;
}
#content
{
width: 800px;
background-color: #f0f0f0;
}
<div id="title">
TITLE
</div>
<div id="content">
CONTENT
</div>
Actual result
This is what it looks like when the page is scrolled to the left
(For the sake of simplicity and privacy, content irrelevant to the question is censored.)
After fiddling a lot with positioning, I eventually came up with something.
body
{
position: absolute;
min-width: 100%;
min-height: 100%;
}
#menu-background
{
z-index: -1;
position: absolute;
width: 250px;
height: 100%;
background-color: #404040;
}
and the menu background HTML
<div id="menu-background"></div>
<body> needs absolute positioning, otherwise the table of the content div will overflow out of the content div. Also, it needs a min-width of 100% to cover both cases: Either the window is smaller, or it's larger.
The menu works the same way, except that it is a single <div> that spans the entire page.
This solution works perfectly for both X and Y (menu and title) stretching and background color.
It's clear that width: 100% takes the width of the window, but not the document.
This behavior is not entirely clear in the spec as far as I can tell.
10.2 Content width: the width
property
<percentage>
Specifies a percentage width. The percentage is calculated with
respect to the width of the generated box's containing block. If the
containing block's width depends on this element's width, then the
resulting layout is undefined in CSS 2.1.
Two methods around the problem involve CSS positioning.
1. position: fixed
Fixed positioning makes the width relative to the viewport.
#title {
height: 50px;
color: white;
background-color: #404040;
position: fixed; /* NEW */
width: 100%; /* NEW */
}
DEMO
2. position: absolute
Absolute positioning also works:
#title {
height: 50px;
color: white;
background-color: #404040;
position: absolute;
width: 100%;
}
DEMO
For me it worked with this two little friends:
width: auto;
min-width: 100%;
No positon: fixed/absolute needed
I have two Elements horizontally aligned, and the left one is a list. If I add some items so that the list should start scrolling, the list just grows larger then my device height is and my second content on the right side scrolls away if I scroll the list downwards. So the list is more then 100% in height... Here is some code for you :
http://codepen.io/anon/pen/qhylB
As I have created this code I just noticed that my both divs don't scale to 100% of the device width. Could you explain me why?
It's because the scrollbar is on the body (or html for firefox I think). Instead you need to have the body's height fix to 100% and then move the scrollbar to the list container (33percent div):
http://codepen.io/jonigiuro/pen/JEkLH
html, body {
margin: 0px;
padding: 0px;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.content33percent {
height: 100%;
max-height: 100%;
overflow: scroll;
}
i changed your 66% to a fixed position, now when you scroll down it looks like you are scrolling the list when you are actually scrolling the whole document, this way you can apply the scrolling over the complete document:
http://codepen.io/anon/pen/KLzvo
.content66percent {
background-color: blue;
height: 100%;
width: 66%;
position: fixed;
right: 5px;
also, i have removed the floating from both the 66%er and the 33%er and adjusted them a little. if you want them to touch each other, change 66% to 66.53%.
Is it possible to change the height of an HTML element when the viewport resizes with pure CSS? It's hard to explain the problem, but I'm still going to try:
What I want, is a page with a header, content and a footer, like most webpages. As I'm working with a 1920x1080 monitor, I'm using that as my standard. The problem however is that not everyone is using a 1080p monitor. Some are using the older standard, 1280x1024 or using a tablet where the height can be 2560px (I'm not doing smartphones, as they will have a completely different design due to the small screen width). On my page I have images, covering a fixed width. If this width is greater than the width of the viewport, the images will be displayed underneath each other:
(Right-click on the image and select "show image" to view at full size)
As you can see in this image, when the viewport is smaller, the images will stack and will fall from the background. The 'Follow me on:' section even felt of entirely. What I want to do is, when this happens, to make the content div larger, so all of the content stays on the page. I know this is possible using height: auto, but when you do that, the fixed height of the footer will follow after it, and on a screen with a large height, there might be a white border because the document height is smaller than the viewport height.
Take some time to learn min-width, min-height, max-width, max-height, (css attributes) and device-width, device-height (css default values of the client viewports). I can not guarantee they would refresh while you drag/resize the browser window or viewports in devices, but I think they help your style rules.
It's slightly unclear to me what your end-goal is with this so I did my best interpretation. If it's not what you're looking for, give me a good mental image of what you're trying to do and I'll try to correct it.
Live Demo
CSS:
html, body {
box-sizing: border-box;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#wrap {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
}
#header, #content, #footer {
position: absolute;
width: 100%;
}
#header {
top: 0;
height: 70px;
background: lightblue;
}
#content {
overflow-y: auto;
top: 70px;
bottom: 70px;
background: limegreen;
}
#footer {
bottom: 0;
height: 70px;
background: purple;
}
HTML:
<div id="wrap">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
i want a background image that is larger than the content, which will remain centered with the content, but will not affect the layout (meaning no scrollbars to accomodate the background image). the content must be centered using margin: auto; so that the left side will remain flush with the left side of the viewpane, when the viewpane becomes smaller than the content.
I have seen this question asked several times, and have tried quite a few solutions, but none of the accepted answers have actually worked.
Edit to Clarify
This question is still a bit murkey, so I will attempt to clarify with some images showing what I need. In these images, green is the background image, red is the main content, and blue is the browser's viewpane.
A: When the viewpane is smaller than both the background image and the main content, the left side of the content remains flush with the left side of the viewpane, the background image remains centered to the main content, the viewpanes scrollbars will only scroll out to the right edge of the main content (and not to the right edge of the background).
B: When the viewpane is larger than both the background image and content, both remain centered to the viewpane.
C: When the viewpane is the same size as the main content, the background image should remain centered to the main content, no scrollbars should be present.
Updated Answer: I still have spent way too much time on this :-), especially when it ended up so simple. It allows for a background to be sized based on the height of the container, which seems to be different than yunzen's solution. Now does use margin: 0 auto;. Still grows with container height.
View the new answer.
You can view the original, more complex answer which does not use auto margin.
HTML:
<div id="Bkg">
<div id="Content">Content goes here. </div>
</div>
CSS:
#Bkg {
width: 100%;
min-width: 300px; /* equals width of content */
background:url('http://dummyimage.com/400x20/ffff00/000000&text=Center') repeat-y top center;
padding-bottom: 50px;
}
#Content {
width: 300px;
margin: 0 auto;
}
I guess this is what you want
HTML
<div id="content">
content<br/><br /><br/>
content<br/>
</div>
<div id="background"><div></div></div>
CSS
html, body {
height: 100%;
}
#background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* this is the height of the bg image */
min-height: 600px;
z-index: -1;
}
#background > div {
margin: 0 auto;
background: url("http://lorempixel.com/800/600/sports/2") no-repeat 50% top gray;
width: 100%;
height: 100%;
/* this is the height of the content */
min-width: 500px;
/* this is the width of the bg image */
max-width: 800px;
/* this is the height of the bg image */
max-height: 600px;
z-index: -1;
}
#content {
/* these are just some numbers */
width: 500px;
height: 400px;
border: 1px solid gold;
margin: 0 auto;
background: rgba(255,255,255,0.2);
}
Well, if it expands past the browser's window size, it's going to create a scrollbar for the entire window. I wasn't sure exactly what scrollbar you're trying to prevent.
max-width tells it "under no circumstances should this box be bigger than this width." So a box bigger than that will simply expand past the parent's boundaries.
See the jsFiddle.
If I'm understanding the question right, I believe this is what you're wanting.
.main-container
{
height: 1005px;
left: 50%;
margin-left: -560px;
position: relative;
width: 1120px;
}
To hide the scrollbars, you can add
overflow: hidden;
For horizontal only:
overflow-x: hidden;
Try this then:
<div id="wrapper" style="position:relative;margin:auto;width:200px;height:200px;">
<div id="image" style="position:absolute;top:0px;left:-100px;width:400px;height:400px;background-image:url(your_bgimage);background-repeat:no-repeat;background-position:top center;">
<div id="content" style="position:absolute;top:0px;left:100px;width:200px;height:200px;"><p>
<p>/* YOUR CONTENT */</P>
</div></div></div>
For some reason I couldn't get the z-index work, but if you can, you can put your content in the wrapper too, and content is not needed.
Given your original diagram I assumed that the background image was intended to be that - an image, possibly hi-res, rather than a repeated pattern. You may want to play with css3 background-size property which is handy for this specific purpose. It is well supported by modern browsers and regresses reasonably well if you have to support IE8 and under.
body {
background-image:url(/*nice higher res picture*/);
background-size:cover;
background-repeat:no-repeat;
}
http://jsfiddle.net/YyzAX/