I have an article styled like with this class:
.stretchedToMargin {
display: block;
position:absolute;
height:100%;
bottom:0;
top:0;
left:0;
right:0;
}
This is fine: the article takes always at least the whole vertical space. For articles longer than the screen, a scrollbar is shown.
But, for articles extending further than the screen, when I need to scroll to view the content, the background is not set. The article is split between a part with the right background and a part with the wrong background.
How can I force my article to be actually as high as the content, but at least as high as the viewport?
EDIT
Adding an example: http://jsbin.com/UvasEBik/1/
An the corresponding screenshot:
You could use min-height: 100vh which is 100% of the viewport height. So the article would be at least 100% of the viewport height.
Related
I'm designing a chat UI for WebView and Mobile only and I was wondering on how do you keep the edit box always on the bottom like WhatsApp or Telegram. The content in the chat box is scrollable depending on the amount of messages like mobile apps and the chat box is fixed. I tried applying fixed height but it will be messed up for different devices.
How do I make the edit box always on the bottom no matter the device height? (Just like WhatsApp or Telegram)
So far only when defining the height will allow the content to be scrollable, percentages don't work.
height:640px;
Here is the fiddle:
https://jsfiddle.net/rrL0nkq7/
To fix your editbox in the bottom you need to give it a position:fixed; and bottom:0;
And if the height is known lets say height:50px;then you must add padding-bottom to chatcontainer padding-bottom:50px;because if you don't you will not see the last content of your chatbox
Make textarea for chat box and give it this css
textarea{
position:fixed;
bottom:0;
left:0;
width:100%;
height:60px;
}
.chatcontainer{
height: 100px;
position:fixed;
bottom:0;width:200px;right:0; /*edit your wish*/
font-size: 0.6em;
overflow-y: scroll;
}
This will give the container a fixed height and overflow-y scroll which will make your chat scrollable. Is this what you are looking for?
I am trying to fit an image to its full width of the browser. Please let me know CSS code for that. I am using px for container. So let me know according to that. I don't want scroll bars to full screen of the browser. I am trying width:100%, width in px. But nothing works I see scroll bar.
Images have their own display type in CSS, so when you say something like width:100%, it fills to 100% of the original image's dimensions rather than acting like a block and expanding to fill 100% of the parent element.
You can fix that by changing the display type, though only for that one image:
<style type="text/css">
img.big-img {
display:block;
width:100%;
}
</style>
…
<img src="my_image.jpg" class="big-img">
If you want it to depend on browser's viewport add this to your element's css and it will stretch automatically
background-size: 100% 100%;
img{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
I am currently building a website that uses two columns, inside a position fixed box to make the heights stay at 100%.
I need the content div to scroll down if the content is longer than the page (on 11/13" screens, page is responsive) - but by setting overflow scroll on the content, the background does not drop, and there is still content at the bottom of the page.
There are two links here, one is the page as it is, and the other is the page with extra content (to make it longer than your viewport)
Link 1 link 2
If you can help my solve this, i'll be thankful :)
Add Overflow:auto; It works fine. I checked it with that page.
The problem is the .bf_page is set to height: 100% - this is getting the full height of the body, however the div doesn't start at the top of the page so it continues under the bottom of the body tag for 100 or so pixels, meaning the last bit of content is getting chopped off (hope that makes sense?!).
The height of the logo (which is causing the page to extend) is 121px so you could do the following:
Change .bf_page's height to:
.bf_page {
height: calc(100% - 121px);
}
Set .bf_content_text to overflow: auto
I've tested that and it seems to work.
Taking out the "position: fixed;" on the '.bf_menu' class works for me, if you're having trouble getting the menu to stick to the top of the page, just hide the blockquote div with display:none.
Example:
<div id="wrapper">
<div id="content">
<div id="data">
</div>
</div>
</div>
#wrapper {
height:100vh;
width:100vw;
background-color:black;
position:absolute;
}
#content {
background-color:red;
height:80%;
width:80%;
position:relative;
overflow-y:auto;
}
#data {
background-color:yellow;
width:80%;
height:1000px;
}
http://jsfiddle.net/nGU8R/1/
I have my heights set up properly so that it will stretch to the bottom, but it will not stretch passed the bottom, it simply stops and other content stretches beyond it.
If you take my code and put it in, you will see what I mean.
HTML:
http://pastebin.com/ScvdB4zs
CSS:
http://pastebin.com/mxrZ6Gd9
If I were you I would simply just take out the min heights and change the heights of both the .nav and the .dashboard to whatever you want. It is much more customizable. And just a suggestion: I would make the dashboard a certain percent, just so then people with a different size screen can have the same aesthetic pleasure.
Try adding an overflow to your nav div to extend the contents
.nav {
overflow:scroll;
background-color:#153E7E;
height:500px;
min-height:100%;
width:250px;
border-right:5px solid #151B54;
float:left;
}
Ok, lets see if i can explain this. My page content has a width of 960px. It is centered in another div that has a width of 1426px (#siteWrap).
#siteWrap{
margin:0px auto;
width:1426px;
background: url(../images/bg.jpg) no-repeat ;
}
What i need to find out is how to get #siteWrap to center on a page regardless of screen resolutions. Most of my visitors are on a 1024x768 screen resolution. When i test this page on that resolution i am forced to scroll left to right to get to the site content.
Any help would be appreciated.
Just set
width: 100%;
and the margin: 0 auto; should be set on your content div, not on this one.
When a container overflows horizontally, the browsers natural reaction is to dock it to the left side of the screen. I think it should be doing this. To get around it, you can use Javascript to center your container element by calculating the necessary offsets based on screen/viewport resolution.
Try the following:
#sitewrap {
position:absolute;
top:0px;
left:50%;
width:1426px;
margin-left:-713px;
background: url(../images/bg.jpg) no-repeat ;
}
This will be centered but will overflow the browser window.