I have write below code :
<body>
<div class="navbar" id="navbar">
</div>
<div id="container">
<div class="row">
<div class="col-2">
<div id="nav_drawer">
</div>
</div>
<div class="col-10" id="table_container">
<div class="div_table" data-url="/getDevice">
</div>
</div>
</div>
</div>
I want to scroll only id : table_container
Is there any solution.
Thanks in advance!
You haven't given much additional context around what you're trying to do, but if you're simply after the relevant CSS to make an element display it's overflow in a scrollable area it would be:
div#table_container {
overflow: scroll;
}
However, this will only take effect if the content within #table_container actually overflows the height or width set on the container. You'd likely need to specify such a set height or width, but again without seeing your existing CSS it's hard to comment further.
You can also specify scroll in only the x or y dimension using the overflow-x and overflow-y properties respectively. Read up on the overflow property:
https://www.w3schools.com/cssref/pr_pos_overflow.asp
Try to set overflow-y property for vertical scroll.
#table_container{
width:500px;
height: 110px;
overflow-x: hidden;
overflow-y: auto;
}
Related
So I'm trying to create a div container that will expand with the window. Here is a general outline of my HTML:
<main class="flex-shrink-0">
<div class="parent">
<div class="row full-border rounded">
<div class="bg-white">
<div class="row justify-content-center">
Content Here!
</div>
</div>
</div>
</div>
...
</main>
And the CSS:
.parent{
width: 90vw;
overflow: hidden;
}
On initial load everything looks nice and clean. The behavior while expanding the window is that the left edge will stay mostly stationary, adding some extra space to the left of it, but the right edge expands out of sight as the container tries to maintain that 90vw.
you should use percentages instead of viewport unit
something like this should do
.parent{
width: 90%;
overflow: hidden;
}
I want the page to be 100vh in height, so that there are no scrollbars on the whole page. For some reason the main grid is bigger than the screen size and some of the elements are getting clipped.
<html>
<body>
<div id="root">
<div class="app_container">
<div class="navigation">
<div class="navigation_logo_container"><img src="/icon.9c86b69e.png"
class="navigation_logo"><span>Sample</span></div>
<div class="navigation_buttons_container">
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
</div>
</div>
<div class="game">
<div class="quiz"><span class="question_text">Sample</span>
<div class="answer_choices">
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Codepen: https://codepen.io/GuacomoleCyclone/pen/RwKjmzO
Base on your setup the 100vh is working but your children are adding to the cause...
Meaning you have nav with height on fit-content...so lets just say 65px;
but then you have game div at height: 100%
If you remove that nav it works as you want, ..so for easily to solve this, you would have to also equate that extra height besides 100% game(nav height).
So meaning you would have to give:
.game {
height: calc(100% - 65px);
}
There are other ways to solve your setup without doing this but this is one of them.
I have this structure:
<div id="container">
<div id="header></div>
<div id="content>
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
I need to use background-image on container, but it does not have any content. Only header, sidebar, and main have content. How I can do it without position: absolute or specifying height in pixels?
min-height is useful, but I want to try dynamic size.
As others had noticed, it doesn't make much sense to have a container without content... but if you really wanna do this, you could use a padding on your #container to give it the size of the image:
#container {
background-image: url(https://lorempixel.com/g/800/600/);
background-size: cover;
padding-bottom: calc(100% * (600/800));
}
<div id="container">
<div id="header></div>
<div id="content>
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
This way, the container will have the same aspect ratio as your background image.
JSFiddle
Basically you can't show a background on a container that does not have content or specific height/width because it makes no sense.
A background means the "backside of the content", if the content don't have a size where you put the background? :)
If you have a rough idea of how much content the container is going to contain, you don't need to specify an exact height for it. Instead, consider using the min-height attribute like this:
#container {
background-color: black;
min-height: 50px;
}
<div id="container">
<div id="header"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
If you're setting a background, it means that it will be displayed behind all of the content within the area that the content is in. For this reason, a minimum height must be specified for it to display the background without requiring any fixed, unchangeable height and without any content in the container.
Try it:-
background: url("image.png") no-repeat 105% 105%;
try this:
#container {
min-height: 200px;
background-image: url('your-image.png');
}
I know this question was asked many times, but it's still unfigurable for me. Anyway I have a code like this:
<div id="header">
Here are many different div's with various position (relative, absolute, static, etc).
</div>
<div id="content">
<div class="row">
<div class="inner">
<div class="upper">
Some dummy content
</div>
<div class="lower">
</div>
</div>
</div>
</div>
Now, how can I set for example .upper div to fit into the window, since I have no idea what's the height of header?
You could work with media querys
#media(min-height: 500px){
.upper{
display: none;
}
}
means if the height of .upper is at least 500px high it will be displayed. You could also set it from position: fixed; (what I suppose it is) to position: absolute; if the window is too small, then you'd have to scroll instead of squashing your content
I have a comment box like so...
<div id="comments">
...
</div>
Now, inside this comments div I have another div called box...
<div id="comments">
<div id="box">
...
</div>
</div>
The box div is position: fixed and it works mostly fine, but...
What I would like is, instead of the box div "floating" above all the content, for it
to be only scrollable within the comment div.
Do i need to use JavaScript for this?
You don't need JS for this. Simply add overflow:scroll and set the outer DIV to the fixed size. Then if internal DIV is larger than outer div you will see the scrollbar(s)
You can try it on this page
<style>
#comments { overflow: auto; height: 200px; }
</style>
<div id="comments">
<div id="box">
...
</div>
</div>
Give a suitable height for the container div ( comments ) and oveflow auto will make a scroll bar if the content exceeds the height of the container.
Overflow: the 'overflow' property