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
Related
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 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;
}
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've been trying all sorts of solutions offered here and other places, and none of them seem to work. I'd like to have an image take up the full width of the browser window, no matter the size (height scaled proportionally). But I need to place this image within a smaller container <div>, as it's part of dynamic content (the body of a blog post). I'm using bootstrap, but I don't think this problem is unique to the framework. Code:
<div class="container">
<div id="content" class="col-md-8">
{dynamic content in here}
<!-- still part of blog post -->
<div class="large"><img src...></div>
{more content}
</div>
</div>
CSS:
div.content { width: 70%; }
div.large img { width: 100%; }
If I put <img src="..." class="large"> inside the container div, it will, of course, be the size of that <div>. If I manually set the width of the image to, say, 1900px, it extends far out to the right of the main content, and I have to experiment to find an appropriate negative margin-left to center the image (margin: 0 auto doesn't center it). And of course that only works on a pixel-specific size. As soon as the window size changes, that code breaks.
If I set position: absolute;, the image appears on top of any following content, which isn't the behavior I want. I also tried this javascript using jQuery:
<script>
$("div.large img").css("width", $(window).width);
</script>
As well as a version without jQuery that iterates over the results of document.getElementsByClassName().
None of these approaches seem to give the results I want. Opening and closing the container would be a Bad Idea(tm), as this would break the isolation between the static layout and dynamic content, and so break the whole site if the static part of the layout changes and the blog posts aren't all manually updated.
It works for me with position absolute
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0;
}
div#small{
width: 200px;
background-color: green;
}
div#fullscreen{
position: absolute;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="small">
i am a small div inside your browser window
<div id="fullscreen">
i got the same width as your browser window
</div>
</div>
<div id="small">
i am a small div inside your browser window
</div>
</body>
</html>
I think you'll need to do something like this...
<div class="container">
<div id="content">
<div class="col-md-8 etc..."></div>
{ content in here}
</div>
<!-- still part of blog post -->
<div class="large"><img src...></div>
<div class="col-md-8 etc..."></div>
{more content in here}
</div>
</div>
</div>
Set the .container to 100%, the content to 70% and the .large to 100% too
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):