I do want to display a scrollbar inside a table ( within a div ):
<div style="width:789px; height:150px; overflow:auto;">
...
</div>
The problem is that the div have the default height already 150px. I want it to have no height defined from the start, and when the div reaches 150px, the scroll-bar to appear. How can I achieve this?
You can do that with max-height instead of height. It will trigger the scroll-bar once it will reach the max-height.
CSS:
<div style="width:789px; max-height:150px; overflow:auto;">
...
</div>
check this fiddle it should show you how to archive this
.box{
width: 100px;
height: 50px;
overflow: auto;
border: 3px solid green;
}
.content{
width: 1000px;
height: 30px;
background: red;
}
Use the css property max-height
div {
overflow: auto;
max-height: 150px;
}
Here is an JSFIDDLE Example.
.
Related
I have this CSS for a div:
.modal-dialog {
margin: 30px auto;
}
which puts it in the centre of the page, i had the width set to a fixed width of 800px but i want to change it so its the width of the content inside (not the width of the page)
i tried setting the width to 100% and i also tried setting min-width:800px; but both of these just set the div to the full page width
how can i make this div stay in the centre of the page and only be the width of the content inside it
Use the following on the container :
.modal-dialog {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
outline: 2px dashed red;
}
.content {
width: 50vw;
height: 50vh;
background-color: blue;
}
<div class="modal-dialog">
<div class="content"></div>
</div>
I believe this should work.
.modal-dialog {
margin-left:auto;
margin-right:auto;
width:auto;
}
This will put your div in the center and make the div as wide as its content.
i want to place a title and a content div inside a container div. title div, (which has not a known constant height) should stay in top of container. content div comes below the title div and it should not overflow container. in overflow situation only the content div should scroll.
please take a look at this picture:
this is what i tried:
<div class="container">
<div class="title">title</div>
<div class="content">
a very long content...
</div>
</div>
CSS:
.container{
width: 300px;
height: 500px;
}
.title{
background-color: gray;
}
.content{
height: 100%;/*which is obviously wrong*/
overflow: auto;
}
and i don't want to use js for this.
In order to get the overflow to work you will have to give the content div a height. Here is a JSFiddle that looks like what you want, although to make it more dynamic you might want to look at javascript.
.container{
width: 300px;
height: 500px;
}
.title{
height: 1em;
background-color: gray;
line-height:1em;
text-align:center;
border:1px solid black;
}
.content{
height:400px;
overflow: auto;
padding:10px;
border:1px solid black;
}
Also I added some styles to match your picture.
http://jsfiddle.net/m0pum906/
I suggest you add position:fixed to your container class in CSS.
.container{
position:fixed;
width: 300px;
height: 500px;
}
Hope this helps :)
I'm stuck with this problem:
I have a div (#container) which contains two divs. The height of the container should be exact 100%, regardless of the content of this div - not less not more.
Inside this div I want two full-width divs on top of each other:
The (#upper) div's content automatically determines its height.
The (#lower) div's content should be scrollable, but only vertically. Its height is dependent on the height of (#upper): 100% - (#upper)height = (#lower)height
Currently I have the following css ...
body {
margin:0;
padding:0;
}
#container
{
position: relative;
width: 500px;
height: 100%;
max-height: 100%;
background-color: #f00;
}
#upper {
width: 100%;
background-color: #0f0;
}
#lower {
width: 100%;
background-color: #00f;
overflow: auto;
}
... as well as this code:
<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>
How can the (#container)'s height be exactly 100% - independent of its content? Now the height becomes larger because of the combined content of (#upper) and (#lower)?
How can (#lower) be scrollable (only up and down, not left to right!)?
Thank you very much for your feedback, I hope we can all learn from this.
You should set your html and body elements to have a height of 100%, so your children divs know what to base the percentage off of. Like so:
html, body {
height:100%;
width:100%;
}
Change your container to this:
#container
{
width: 500px;
height: 100%;
background-color: #f00;
}
As for your scrolling issue, you're almost there. Change the code to the following:
#lower {
width: 100%;
height:100px;
background-color: #00f;
overflow-y: auto;
}
For it to work best, have a fixed height set on your lower div and that'll make it easy for the scrollable action to work best.
EDIT:
I realized I mis-read your question. You'd like to have your lower div fill the remaining height of the window. Here's how to do that in jquery:
var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top);
$('#lower').height(remaining_height);
I still haven't found a way to do that with only CSS... Sadly.
I think this may help you:
<head>
<title></title>
<style>
.upper{
height:50px;
border: 1px solid groove;
}
.lower{
height:calc(100% - 50px);
border: 1px solid blue;
}
</style>
</head>
<body>
<div style="height:500px; border:1px solid red; position:relative;">
<div class="upper"></div>
<div class="lower"></div>
</div>
</body>
This will take 50px out the lower div
For a pure CSS solution, use display: table-row.
<style>
*{
box-sizing: border-box;
margin:0;padding:0;
}
html, body, #container{
height: 100%;
}
#container{
display: table;
height: 100%;
}
#upper, #lower{
display: table-row;
}
#upper{
height: 100px;
}
</style>
<div id="container">
<div id="upper">bla</div>
<div id="lower">bla</div>
</div>
This solution only works if the height of the content is not more than 100%, see here: https://stackoverflow.com/a/13668087/603569
Here a 100% css alternative:
<div style="height:100%;">
main div
<div style="height:100%;padding-bottom:200px;">
header div
</div>
<div style="position:relative;height:200px;top:-200px;">
footer div
</div>
</div>
Remember that all parent elements, including body and html, must have their height set too.
I am trying to build a layout that consumes all the space that is visible in browser. I set html, body height 100% as was suggested in different SO posts. Following is the markup that I am trying
<div>
<div class="header">
</div>
<div class="main">
<div class="container">
<div class="content"></div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
max-height: 100%;
}
.header {
height: 30px;
background-color: #000;
}
.main {
height: auto;
padding-right: 0px;
max-height: 100%;
width: 100%;
display: block;
clear: both;
background-color: #eee;
}
.container {
width: 90%;
overflow-y: scroll;
background-color: #ccc;
}
.content {
height: 2000px;
width: 80%;
background-color: #fff;
}
the content div height cause the whole body to grow and hence the browser's default scroll bars are shown. Though I have set the container div to scroll in order to display the content of content div, still the scroll bars for container div don't show. How can I fix this.
here is the jsfiddle
Edited:
By default the height of the div element depends on its content (unlike width which takes 100% width of the parent). That's why when you specify the height of inner element as a percentage it won't be accurate if your parent tag has no explicitly defined height (that means height has to be defined up to the very top of the DOM since height is not inheritable).
In your case you need to add height: 100%; or any other height to your .container , .main and the wrapper div
modified fiddle
Can I make a banner reach outside of its container, without creating horizontal scrollbars if the window is too narrow?
I thought I had done this before with negative margins, but can't get it to work now.
Demo: http://jsfiddle.net/Znarkus/s95uz/
<div id="main">
<div id="banner">I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>
<div id="content">
</div>
</div>
You can use a container that has a min-width of 500px or width 100% depending on if you want a scroll bar or none at all; add position relative, and overflow hidden and then inside of that add another container that is your set width of 500px with a margin of auto for the left and right. Put your content inside of the inner container using position absolute; in this case your #banner would be right: -50px;
I've modified your fiddle here: http://jsfiddle.net/s95uz/14/
<style type="text/css">
#main {
min-width:500px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#inside{
width:500px;
margin:0 auto;
height:100%;
position:relative;
background: red;
}
#banner {
background: green;
position: absolute;
right: -50px;
width: 150px;
height: 300px;
}
#content {
width: 400px;
height: 500px; /* Simulate content */
background: blue;
}
</style>
<div id="main">
<div id="inside">
<div id="banner">
I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>
<div id="content"></div>
</div>
</div>
Just add overflow : hidden to the div "main" css.
Adding this to an element hides the possible conditional sidebars.
Your new css will look like;
#main {
width: 500px;
margin: 0 auto;
background: red;
position: relative;
overflow:hidden;
}
You can use responsive CSS and hide the banner when the content plus the banner are higher than the viewport:
#media only screen and (max-width: 550px) {
#banner { display: none;}
}