I'm trying to create a document using HTML which when it's printed, adds a 'cover page' with a border. I have a div that's only visible with '#media print', but I can't figure out how to get that div to fill the page. Setting a height of 100% with position: absolute fills the entire document, not just that one page.
Is there a way of restricting the size of the div to just the current page? When I tried position: fixed, it did put it in the right place, but on every page. In essence, I need to find a way to set height to the viewport height, but maintain position: absolute.
For this purpose, I'm restricted to a solution compatible with IE8 only.
Give your html and body a height of 100% then the cover a height of 100% to get a cover height based on the viewport. Give the cover a position of absolute as well and position it.
body, html { height: 100%;
}
#cover { position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
If you do a div#cover like this:
#cover {
background-color: red;
position: absolute;
border: 3px solid blue;
box-sizing: border-box;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}
#media print
{
#cover { display: block; }
}
Your first page will be red with a blue border (or whatever it contains in the div)
The top, left, right, bottom make it fit to the viewport.
The box-sizing make it incorporate the border size at the div content width/height.
Without your HTML it's not possible to help further than this.
Related
I have to add a video from Youtube within certain limits (the red borders on screenshot). To add the video within these limits I need to use padding-bottom: 36%. Because of this you can't press the bottom block (with the date).
If I reduce this padding-bottom, the block with date moves to the right place but the height is reduced too.
Here is the part of css:
.calendar__general-slyde-video {
position: relative;
padding-bottom: 36%;
height: 0;
overflow: hidden;
width: 315px;
}
.calendar__general-slyde-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60%;
}
I would be grateful for any help!
ok,if the link you provided is your code and your problem is to place the calendar just below the left most message , i.e "calendar__changing-content" div, then here are some of problems i found
first ,your calendar__general-slyde-video clearfix have height:0 which means your video is being placed on the padding of the div.(which represents it's entire height)
second, your "calendar__changing-content" div does not contain it's children in a single row (assuming that's what you intended based on the given picture) hence your calendar is in the right place but it's sibling div's height is large which makes it appear distorted.
here is the solution to them:
add a height to the video and remove the padding also make the iframe 100% height, also you can remove height from other children's if your wish.
.calendar__general-slyde-video {
position: relative;
overflow: hidden;
width: 315px;
height: 233px;
}
.calendar__general-slyde-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
here is the code pen
this should solve your problem, also you can use reset.css to remove browser default settings (just suggesting)
I want to make a sticky footer like the one I made in this example.
http://codepen.io/Kenny94/pen/JvtFs
html, body {
height: 100%;
width:100%;
padding: 0;
margin: 0;
position: relative;
}
div {
font-size: 30px;
min-height:100%;
margin-bottom:60px;
background: red;
}
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: -1;
}
The problem is it doesn't work right in my current project. It sets the footer behind the body but if I start to scroll it appears. If I watch the size of the body in chrome it has a height off 970px but the whole site is much bigger because of the post. It seems to me that the body didn't expand like the Blog Post Wrapper. I set the BG-Color to grey in the body and that fills the whole page. I have no clue why it dosen't work with height 100%. I could set the height to 4000px to fit with the content and everything else but thats not a real solution.
I'm not exactly sure what you are trying to achieve.
-If you are wondering why the footer is placed behind the body, it's because you set
z-index to -1.
So the fix would be this: http://jsfiddle.net/bmpy6/
-If you don't want to have it visible when scrolling (so to say, keep it fixed at the bottom at all times), this should be what you want: http://jsfiddle.net/bmpy6/1/
For that, you omit the position: fixed;.
You don't need to set your height on the html tag or the body tag. It will flow with the content. You're setting the min-height of the main div to 100%. This will take up the rest of the remaining space when a view is loaded pushing the footer off the screen. You can either change the height of the main div or make the footer position fixed to the bottom of the screen if you want it to be sticky as in stick to the bottom of the screen.
Change :
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: -1;
}
To :
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: 1;
}
Just changing the z-index will bring your footer to the front. Remember that the Z-index basically gives your id's and classes precedence over one another in terms of their visibility.
You do not need to set the height at all. Try this:
div {
font-size: 30px;
margin-bottom:60px;
background: red;
}
Instead of:
div {
font-size: 30px;
min-height:100%;
margin-bottom:60px;
background: red;
}
You see, when you tell the page to have a height of 100%, you are telling it fill 100% of the screens height. When you remove the height,(In this case it was a min-height so it will expand if needed) the <div> expands to the height needed to hold the content.
See this JSFiddle for a working example
Hope this helps!
In image above you can footer top border is not aligned with the login box.I want to restrict border width equal to login container width.
and also I dont want x axis to scroll as in image.
To solve overflow issue I used,
html {
overflow:hidden !important;
}
But it does not seems promising to me,
I want something like this ,
footer top border should be aligned with red lines
Fiddle
You are using position: absolute; so you need to use left: 0; for the .google-footer-bar
Demo
.google-footer-bar {
position: absolute;
bottom: 0;
left: 0; /* Add this here */
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
Also, it will be better if you wrap up the elements, say a maximum 1000px in width and than use margin: auto; to center them, having no wrapper element will just spoil your layout. As far as 100% width element goes, you can use width: 100%; for the container and then nest 1000px; of another child element with margin: auto;, this way your layout will be stable.
You might want to start by removing width and min-width and also height and min-height.
I am looking to keep an element at the bottom of a sidebar. To achieve that, one of the easiest solution would be:
#container
{
position: relative;
height: 100%;
}
#bottom-element
{
position: absolute;
height: 20px;
bottom: 0;
}
The result of this code is going to be:
However, I also need to keep the sidebar responsive. And since an absolute position removes the #bottom-element from the flow, if the sidebar's height becomes too small, the #bottom-element is going to cover the blue elements, instead of creating a scrollbar.
So my question is:
How to keep the red element at the bottom of the sidebar, while keeping it at the bottom of the blue elements list when the sidebar is not tall enough?
Just add some bottom padding to the container equal to the height of the absolutely positioned element:
#container
{
position: relative;
height: 100%;
padding-bottom:20px;
box-sizing: border-box;
}
#bottom-element
{
position: absolute;
height: 20px;
bottom: 0;
}
Update you might also want to add box-sizing: border-box to stop the padding being added to the 100% height. I've updated the CSS with this.
I have a div(InnerDiv) which contains a grid with paging enabled...
After some user actions , data inside that grid will load and we will have a big grid!
The problem is when grid's data loads , overflow the div's bottom portion(InnerDiv) and some of those data get's displayed out of the div.
my css of body and html like below :
html, body
{
margin: 0; /* get rid of default spacing on the edges */
padding: 0; /* get rid of default spacing on the edges */
border: 0; /* get rid of that 2px window border in Internet Explorer 6 */
height: 100%; /* fill the height of the browser */
border:3px solid red;
}
i need 100% height of body when page loads...
OuterDiv inside body like below :
div#OuterDiv
{
position:absolute;
width: 100%;
height: 100%;
/*height: auto;*/
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:5px solid green;
}
InnerDiv Inside OuterDiv Is Like Below :
div#InnerDiv
{
position: relative;
width: 100px;
height: 100%;
margin: 0 auto;
background: transparent url('../Images/Blue.png') repeat scroll left top;
}
Content Inside InnerDiv Like Below :
#Content
{
position: relative;
top: 10px;
background: transparent url('../Images/Red.png') repeat scroll left top;
width: 550px;
height: 1080px; /*>>>>>>>>>>>>>>>>>>> plz see this line*/
top: 10px;
right: 10px;
padding: 7px;
border: 10px ridge #ce004e;
color: black;
}
that grid(Content) is inside InnerDiv...
EDIT 1
the below example can show my situation :
Here's an example at jsFiddle
we can not remove position:absolute of OuterDiv , by doing that height:auto or height:100% on it does not work at page start -> outerDiv should be 100% because Of InnerDiv Background and remember InnerDiv height is not 1080px at start -> it is only 200px at page load and dynamically it will change to 1080px!
i want to force yellow area (InnerDiv) to fill entire Purple Area...
also InnerDiv Should Have 100% Height Because Of It's Background At Page Start...
i know this problem is about 100% height / but how can i fix that ?
EDIT 2 :
AT LAST HERE IS MY WEB SITE :
MY WEB SITE
plz change the height of red area with firebug - so by changing it to 1080px body and OuterDiv And InnerDiv Will grow.
but at page load i want body and OuterDiv And InnerDiv 100% height.
how can i do that?
thanks in advance
You need less constraints on #OuterDiv. By specifying top, bottom, left, and right, you're locking the edges of #OuterDiv to the edges of body; and your body rule locks body to the same size as the viewport.
Try changing your div#OuterDiv rule like this:
div#OuterDiv
{
position:absolute;
margin: 0px;
padding: 0px;
border: 5px solid green;
}
Here's an example at jsFiddle
From what I could gather from your explanation and styles you basically want this:
http://jsfiddle.net/sg3s/zXSXx/
If this is correct I will also explain what is happening to each div. Else please tell me what div is behaving not as you would like and why.
By the way if possible use absolute paths (whole links) to images. Seeing how they need to fit together will help us all to find something that works for you.