I've looked at several topics on stackoverflow and other sites, but none of the proposed solutions seem to work for me.
The problem is that no matter what I've tried, I still have a scrollbar added to the page that is the same height as the padding on the top of the container (wrapper) div. I can only make it work by fiddling with the min-height on the container div, which obviously wouldn't always work, and besides, is a really sloppy way to handle it. Here's the code.
HTML:
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</body>
(I've tried the footer inside and outside, with the same results.)
Here's the relevant CSS:
html, body {
height: 100%;
}
body > #container {
height: auto;
min-height: 100%;
}
#content {
height: 100%;
position: relative;
}
body {
margin: 0;
padding: 0;
color: #FFF;
background: /*image here*/;
background-size: cover;
overflow: auto;
}
#container {
width: 100%;
padding-top: 50px;
position: relative;
}
#header {
background: /*image here*/;
height: 130px;
box-shadow: 4px 2px 5px #000;
border-top: 2px solid #F8F8F8;
border-bottom: 2px solid #F8F8F8;
overflow: hidden;
}
#footer {
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: #FFF;
clear: both;
}
There may be some odd overflows in there, but they've been thrown it at different points trying to fix the problem. I use a background image that covers the entire background of the site, and a background image for the the header.
Any fiddling with the overflows, heights, margin/padding, or relative/absolute/fixed positioning have either yielded worse results, or the same results.
I'm trying to do this without JS, but if all else fails, I'm willing to resort to that. If that's the case, would anyone mind pointing me to a related JS stackoverflow question and/or a tutorial?
Thanks in advance for any advice.
You didn't provide what browser you are trying to do this in, but assuming it is a modern browser, I have found that the cleanstickyfooter technique works the best. (All credit to Trevor Sheridan for this technique.) I have created an example here on JSFiddle so you can see the implementation. You can adjust the widths, etc, as you need to. The first link provides a lot of good detail.
Per SO requirements, here is the HTML:
<body>
<div id="wrapper">
<div id="content_wrapper">
<div id="content_inner_wrapper">
<div>Site content will be contained here.</div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer_inner_wrapper">
<div>The footer's content</div>
</div>
</div>
</body>
and CSS:
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
}
div#wrapper {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 0px -41px 0px;
}
div#footer_wrapper {
width: 100%;
height: 41px;
background-color: red;
}
div#content_wrapper {
width: 100%;
padding: 0px 0px 41px 0px;
}
div#footer_wrapper, div#content_wrapper {
min-width: 500px;
}
div#footer_inner_wrapper, div#content_inner_wrapper {
width: 500px;
}
Related
I've been following this solution to add responsiveness to my parallax images in my right grid. The responsiveness is working fine except the image doesn't takes up the WHOLE viewpoint.
I have put a red border around the image to show this: https://jsfiddle.net/65r3bth1/3/
When it becomes responsive, the image doesn't fill up the left side of the viewpoint unless I change the background-size and mess around with my background positioning. Is it possible to ensure my image takes up the whole viewpoint while maintaining its responsiveness?
.image-greet {
background: url("http://placekitten.com/g/800/800")
calc(75% + 120px) 50px /120px auto;
/*calc (middle of right grid + how pushed to the rigth) how far push down from top / zoom*/
border-top: 20px;
background-size: 40% auto;
width: 78%;
height: 12%;
margin: 15% auto 0;
background-attachment: fixed;
background-repeat: no-repeat;
border: 1px solid red;
}
Is it possible to ensure my image takes up the 100% of the viewpoint while maintaining responsiveness in its original background position?
Thank you!
The solution that you are following can be achieved with CSS, without the need for JS, as you can see in this fiddle. Hope this helps!
.body {
display: flex;
}
.container {
border: 1px solid red;
width: 100%;
height: 400px;
margin-top: 50px;
}
.sidebar {
height: 2000px;
width: 50px;
background-color: #333333;
margin-right: 30px;
}
.bg {
background: url('https://loremflickr.com/320/240');
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100%;
display: block;
}
<div class="body">
<div class="sidebar"></div>
<div class="container">
<div class="bg"></div>
</div>
</div>
I am having problems getting the content in a div (or its value) to wrap around inside and having the div's height adjust to the contents.
The top one a container, message-box. There are three divs inside like in the picture attached. I need to have divs each-message and each-message-content adjust its height to fit the contents inside. I have looked at many posts in this site and tried many combinations of overflow:hidden and height:auto, but they mostly end up making the each-message-content scroll sideways, and am at wits end.
How can I achieve this?
**** Updated with HTML *****
<div className="message-box">
<div className="each-message-box">
<div className="each-message">
<div className="each-message-date">Date</div>
<div className="each-message-content">ContentContentContentContentContentContentContentContentContentContent</div>
</div>
</div>
</div>
</div>
.each-message-box {
width: 100%;
display: block;
overflow: auto;
height: auto;
margin: 1px;
}
.each-message {
width: 270px;
height: 100px;
margin: 2px;
border: 1px solid #ccc;
overflow: hidden;
height: auto;
}
.each-message-date {
border: 1px solid #ccc;
font-size: 10px;
color: #ccc;
text-align: left;
}
.each-message-content {
width: 100%;
border: 1px solid #ccc;
text-align: left;
border-radius: 10px;
height: auto;
}
Not very elegant to break words like this, but if that's what's needed. btw apart from className, there's an extra in your HTML.
EDIT: Ignore the comment about className - react project comment added after this answer was posted.
.each-message-box {
width: 100%;
display: block;
overflow: auto;
height: auto;
margin: 1px;
}
.each-message {
width: 270px;
height: 100px;
margin: 2px;
border: 1px solid #ccc;
overflow: hidden;
height: auto;
word-break: break-all;
}
.each-message-date {
border: 1px solid #ccc;
font-size: 10px;
color: #ccc;
text-align: left;
}
.each-message-content {
width: 100%;
border: 1px solid #ccc;
text-align: left;
border-radius: 10px;
height: auto;
}
<div class="message-box">
<div class="each-message-box">
<div class="each-message">
<div class="each-message-date">Date</div>
<div class="each-message-content">ContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
</div>
Create a function to record in real time the number if char entered and to change the width of the the container accordingly using javascript.
if your CSS div height not expanding to fit content or wrapping content.
Just use a simple trick.
before the closing tag of the message-box div add a div with class cl
<div class="message-box"><div class="cl"></div></div>
Now in your Css Give this style .cl{clear:both;}
by using this if you have height auto on the div it will still wrap the content.I hope it will work for you.
I want to hide scrollbar, but at the same, i also want to have scrolling action i.e
I want to hide scrollbar but still, want to scroll to see rest of content without actually seeing the scrollbar.
overflow: hidden won't work because after using that I cannot scroll to see the content.
how to do that using HTML/CSS/javascript?
I am working on styling scrollbar but I noticed there is no well-defined way to style scroll bar so I made custom scrollbar using divs with jQuery, but at the end, I have two scroll bar one which I made and other default scrollbar and now I want to hide default scroll bar.
I don't want to use -webkit- because it is not accepted in all browser.
I want to hide scroll bar in the following code.
.container{
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer{
width: 300PX;
height: 6000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 300px;
background-color: teal;
height: 2000px;
top: 1px;
position: absolute;
}
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 6000px;
display: inline-block;
box-sizing: border-box;
}
.page{
width: 100%;
height: 100%;
background-color: white;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
</div>
</div>
</div>
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>
please anybody answer!
And overflow:auto; is out of the question?
It won't show if you don't need but does show when you do.
You need to add the following styles:
#parent {
height: 100%;
width: 100%;
overflow: hidden;
}
#child {
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;
}
Here is the working fiddle: http://jsfiddle.net/5GCsJ/954/
Make your scroll bar transparent. You can do this by the following code.
::-webkit-scrollbar
{
width:0px;
}
::-webkit-scrollbar-track-piece
{
background-color: transparent;
}
Hope this will help you!
Try this:
yourDiv::-webkit-scrollbar{
width: 0px;
}
I don't realy know how to explain this thing in short sentence.
I don't know if it is bug or not..
In parent div with fixed height and overflow-y scroll, I have multiple children elements, which has jquery function click, what displays hidden element in these divs. When I scroll down to last div, after click, hidden element displays in wrong place.
I tried to search for this problem, cause it should be pretty common. But nothing came up.s
It's realy hard to explain with words. Just look at this jquery example with mozilla and after that with chrome.
https://jsfiddle.net/zvwcdzjz/2/#
P.S. I need my original example work and look exactly the same on chrome and mozilla, cause right now on mozilla everything looks exactly as i want it to be, but it bugs on chrome.
It can be solved with jQuery too, makes no difference for me.
HTML:
<div id="el">
<div class="content">
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
</div>
</div>
CSS:
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
#el .content {
width: 300px;
height: auto;
}
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
}
.button {
background-color: blue;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 90px;
float: left;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
margin-left: 300px;
background-color: red;
display: none;
}
JS:
$(function(){
$(".button").click(function(){
$(this).parent(".block").children(".blocktoopen").show();
});
$("#el").scroll(function(){
$(".blocktoopen").hide(); });
});
The set height of #el was causing the red box to appear in the incorrect location. I have removed this. See the example below:
Change:
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
To:
#el {
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
And then you're good to go.
To make your life simpler make the parent .bloc relative so the blocktoopen will be computed relatively. Will help with the responsiveness.
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
position: relative;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
bottom: 50%;
background-color: red;
display: none;
right: 0;
}
I can't post comment so here is another try with jsfiddle. I am not sure if you have horizontal scroll as well. remove margin-right from .blocktoopen and add right:0; Also wrap all your internal content inside a div and set the width to maybe 225px
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
#el .content {
width: 300px;
height: auto;
}
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
position: relative;
}
.button {
background-color: blue;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 90px;
float: left;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
display: none;
top: 50%;
bottom: 50%;
right: 0;
}
.internal{
width: 225px;
}
Have you tried to click on 2 buttons without scrolling? Try it. Looks like you were using visibility: hidden; and not display: none;. Maybe trying to set the position: relative; ...
Just seen the jquery script. Show() and hide() appears to work as visibility css property.
If u look with Chrome DevTools the jsFiddle example you will see that you can't see the red boxes but they are still there.
I want to make it so that Online Users div stays always at size of 200px while the chat window to the left of it resize to the max size it can taking all available space.
So when window is resized for example - the chat window will shrink but Online Users window stays at 200px, kind of like liquid layout.
left div (chat window) is: entry_window
right div (online users) is: online_window
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: 75%;
height: 100%;
margin: 1%;
overflow: scroll;
overflow-x: hidden;
}
#online_window{
border: 2px solid #D4D4D4;
margin: 1%;
margin-left: 0%;
display: inline-block; float: left;
background-color: white;
width: 21.5%;
height: 100%;
}
oh and by the way: for vertical size I made this function to make it in height as big as possible without disturbing bottom part.
function autoscale(){
var v = window.innerHeight - 170;
document.getElementById("entry_window").style.height= v+"px";
document.getElementById("online_window").style.height= v+"px";
}
This can be done entirely without javascript. You can use absolute positioning along with defining top/left/bottom/right and width.
example:
<div id="lefty">this is left content</div>
<div id="righty">this is right content</div>
and
#lefty {
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
left: 0;
right: 200px;
}
#righty {
position: absolute;
background-color: red;
top: 0;
bottom: 0;
width: 200px;
right: 0;
}
See this jsfiddle:
http://jsfiddle.net/Lyp96yqq/
With display:table and table-cell you can do it this way:
*{margin:0;padding:0}
.parent {
width:100%;
display:table;
}
.parent > div {
height:200px;
line-height:200px;
background:orange;
display:table-cell;
}
.parent .fixed {
width:200px;
}
.parent .flexible {
background:red;
}
<div class="parent">
<div class="fixed">Fixed Width</div>
<div class="flexible">Chat Room</div>
</div>
Here The Example on Jsfiddle too.
This could be easily done with the css calc function. However, it depends on what browsers you want to support. check out this link so see what it is compatible with.
Essentially, just do this:
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: calc(100% - 208px);
height: 100%;
overflow: scroll;
overflow-x: hidden;
background-color:red;
}
#online_window{
border: 2px solid #D4D4D4;
margin-left: 0%;
display: inline-block;
float: left;
background-color: white;
width: 200px;
height: 100%;
}
note: you need to -208 to take the border into account. Also, check out the jsfiddle