I'm having some behavior with HTML and CSS that I don't understand and I'm hoping that someone could elucidate it: https://jsfiddle.net/kufd2x96/1/:
<!DOCTYPE html>
<html>
<head>
<style>
#fixedDiv{
position: fixed;
top: 32px;
left: 0px;
height: calc(100vw - 32px);
background-color: blue;
display: flex;
flex-direction: column;
}
#bigSomething{
overflow-y: auto;
background-color: green;
flex-grow: 1;
}
</style>
</head>
<body style="display: flex; justify-content: center;">
<div id="fixedDiv">
<div>
Small Something
</div>
<div id="bigSomething">
Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>v
Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>v
Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>v
</div>
</div>
</body>
</html>
What I expect to happen and why:
In this MCVE, since #fixedDiv is set to have a height that brings it exactly to the bottom of the page, since flexbox (I thought, I saw a few SO answers that claimed as much) guarantees that the internal elements won't grow any larger than their container, and since #bigSometing has overflow-y: auto; I expect everything to stay on screen and for #bigContent to get a scrollbar so everything is accessible.
What actually happens:
Instead, #bigContent grows to well beyond the bottom of the screen, but to a seemingly random height since it doesn't grow far enough to contain its entire contents (as can be inferred from the fact that a functional scrollbar is present).
The Question:
Why is this code not behaving how I expect it to, where #bigContent's area is entirely on the screen and where it gets a scrollbar, and how can I fix it?
I found the issue: I had vw when I should have had vh, so the calculation was based on the width of the page, as if the width were the height.
Related
I am relatively new to web design and had a question regarding centering and height I was hoping anyone could answer.
I am trying to center a box in a box using CSS. I previously used the CSS code snippet on another page (the part between the "THIS PART" comments, see below) and assumed I would have to put it under the #outer #inner{ part since the inner box is what I want to center. This did not work so I randomly put it in the #outer part and it worked. I'm unsure why and hoped someone could explain to me the reasoning :)
Also, currently I have a background picture and the 2 boxes on my page and when I shrink the page, everything shrinks as well. I assume it is because everything is in percentages. How would I go about making it so when I minimize the screen, everything stays in place and scrollbars appear? I'm having a difficult time finding another question on this site similar.
Please answer whatever you can, any help is appreciated! Thank you so much :)
html{
height: 97%;
}
body{
background-image: url("Pic.png");
background-size: cover;
height: 100%;
}
#outer{
border-style: solid;
border-color: green;
height: 99%;
width: 40%;
/*THIS PART: START*/
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
/*THIS PART: END*/
}
#outer #inner{
position: relative;
background-color: red;
height: 30%;
width: 50%;
/*Why doesn't the code from above in #outer go here?*/
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link href = "intro.css" type = "text/css" rel = "stylesheet">
</head>
<body>
<div id = "outer">
<h1>Outer</h1>
<div id = "inner">
<h1>Inner</h1>
</div>
</div>
</body>
</html>
To start using the Flexbox model, you need to first define a
flex container.
The flex-wrap property specifies whether the flex items
should wrap or not.
Note: The properties applied to the container are applied to the view of its items.
For reference :
https://www.w3schools.com/css/css3_flexbox.asp
For the case of shirinking problem use px or vh/vw
For reference : https://www.youtube.com/watch?v=__KNqdpqji0
It worked because the part
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
affects the inside of the element and not on itself. I am guessing you were expecting the #outer #inner to align itself by these lines, but wasn't working.
As for the shrinking problem, I would suggest using pixels or vh/vw instead of percentages
Hope this clears your doubts!
This code shows the image at 100%. The images are too big to be shown at 100% in the space where this code will be inserted, thus I need to show them using scrollbars.
<div style="overflow: auto; margin: auto; margin-bottom: 1em;">
<img src="">
</div>
This code shows the image at 100% with scrollbars within a 500px x 500px division. I don't; however, want a fixed size for the outer division.
<div style="width: 500px; height: 500px; overflow: auto; margin: auto; margin-bottom: 1em;">
<img src="">
</div>
I want to adjust the outer division to act as a picture viewer for seeing full size images with scrollbars.
I want the outer division to fill the available horizontal space, which I do not know and will change depending upon the viewer's monitor. The height should auto adjust but not fill the available space as there will be a series of such picture viewer divisions stacked vertically.
The images I will be inserting are large and will 99.9% of the time exceed the available space thus I need the scrollbars.
I don't want the pictures to be resized to the size of the outer division or vice versa.
I can't use any scripts or active content. It must be pure css and html only.
I cannot hard code the pixel sizes of the images as a application will be inserting the image code via a loop and the application does not have any ability to insert the image's width or size.
Keep the outer wrapper at width: 100% and figure out a height that fits your use case.
For responsiveness, I get it suits you better to select the height based on viewport units so that it doesn't fill or stretch beyond the available height (I am taking 50vh here as an example)
Maybe this also helps you.
Snippet below:
body{
margin: 0;
}
*{
box-sizing: border-box;
}
.wrapper{
overflow: auto;
border: 1px solid;
width: 100%;
height: 50vh; /* adjust / omit this as per your requirement*/
}
.wrapper img{
display: block;
}
<div class="wrapper">
<img src="http://placehold.it/1500x1500">
</div>
I think you can do this with either an iframe, or using overflow: scroll with 100% width. It's the height you'd need to figure out. I would suggest using media queries maybe for the height.
Here's a sample jsfiddle that I think is pretty close to what you're looking for. Again, your height is what you have to figure out. The parent div will always take up the full height of the children unless you specify.
.image-wrapper {
width: 100%;
height: 50vh; /* as suggested below in another answer, or you can use media queries */
overflow: scroll;
}
<div class="image-wrapper">
<img src="http://www.spyderonlines.com/images/wallpapers/image/image-20.png">
</div>
https://jsfiddle.net/adpro/bt7aar4b/
I've been banging my head against the wall really hard for the past couple of hours to figure out a way to achieve the layout I'd like for a webapp. And my head hurts.
Basically what I need is to have a full window layout (full width, full height, no scrolling - ever). 100% of width and height should be covered using two different horizontal boxes (you can see them as rows).
The height of the first box/row can be variable (see it as a header for the page)
The one below should occupy what's left of the space, without ever going further than 100% of the window, hence without ever showing a scrollbar.
Now what's a bit more tricky is that within the second box/row, I want content to be displayed with an inner vertical scrolling. Imagine the second box/row contains a list of items, in case of very few items, the bottom part of the box/row should stop right after the content. In case of many items, the box/row should expand right until it hits 100% of the window height (which is basically 100% of the windows - the height occupied by the first box/row). The rest of the content should be visible through scrolling within the second box/row.
Am I making any sense?
Regarding the code, I'm not going to copy/paste the desastrous thing I've pulled together because I'd rather start from a blank page.
This is what I tried:
<html>
<body>
<div id="wrapper">
<div class="box">Header</div>
<div class="box">Content <ul><li>...</li>(x1000)</ul></div>
</div>
</body>
</html>
The reason why I use a "box" class is because both boxes/rows should show the same appearence in terms of backgrounds, margins, shadows, etc.
html, body {
height: 100%;
}
#wrapper {
position: absolute;
height: 100%;
width: 100%;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
For the rest, I've just tried (and failed so far) to manipulate the .box elements by adding hazardously overflow: hidden; overflow-y: scroll; height: 100%; max-height: 100%; min-height: 100%; etc.
Thanks in advance for your help!
The problem is because CSS has long been crappy about auto-adjusting height to available space.
The solution is to use a wrapper that's set to position: absolute and tied to the top, left, right, and bottom edges of the viewport. With this, the browser will auto adjust the height of the element, and if you have a content div inside with height: 100% it'll always fill that space.
Setting overflow-y: scroll on the wrapper will allow the content to scroll if it becomes too long:
http://codepen.io/helion3/pen/jwbcx
Site headers are usually not variable in height. If you're defining the site header using percentages, and if you don't need to support IE<8 then you can use percentages safely with box-sizing: border-box to achieve the same.
I believe this should do the trick.
If you adjust the height of .header make it is equal to the top: position of .content
CSS:
html, body {
margin: 0;
}
.header {
height: 150px;
background: #0080ff; // (Unnecessary, this is set to help you see the header div)
}
.content {
position: absolute;
top: 150px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background: #ff8000; // (Unnecessary, this is set to help you see the content div)
}
HTML:
<body>
<div id="wrapper">
<div class="box header">Header</div>
<div class="box content">Content</div>
</div>
</body>
Maybe you want something like this? I replaced class="box" with ids, but it should work.
Consider following things:
No need to have the "absolute" positioned div (#wrapper in your example)
Create 2 box div same like you have created in your example (.box)
Second box should have "overflow:auto" style property
Calculate the height of header and full display area's height with javascript
Calculate the remaining height and assign this value as height, min-height and max-height for the second box. That's it.
You can check the solution here:
http://webnflash.com/temp/occupyAvailableHeight.htm
When a user lands on the page, I'd like the container that houses the "search" to take up the whole page.
Easy enough: height: 100%;
User scrolls down if desired, sees rest of content.
This is one of those instances where it seems too good to be true...
Perhaps in many cases the user will scroll down and the page will get bigger...
Is this a good solution?
code:
.ss_search{
clear: both;
margin-top: 25px;
height: 100%;
}
Several things you need to watch out for:
Padding and Margins: These will mess with height:100% depending with the margin is applied. For instance if you put a h1 inside a div with height:100% the margin on the h1 will cause issues for you. Also note: html (or body, I forget which one) also have a 5px or 10px padding associated with them.
Height on html/body: Depending on the browser you may experience a div with height:100% not going 100%. You may need to set html and body to a height of 100%. This is what I usually do.
Nothing more comes to mind. Take a look at this. It will have a full screen green area, then when you scroll you will see a full screen red area:
<html>
<head>
<style>
html, body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.full {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="full" style="background:green">
</div>
<div class="full" style="background:red">
</div>
</body>
</html>
I've got a basic website with very long mostly-text content:
HTML goes simplified like this:
<body>
<div class="content" id="01">
<p>LONG TEXT</p>
</div>
<div class="content" id="02">
<p>LONG TEXT</p>
</div>
</body>
Same goes on with about 40 more id's.
CSS looks for these parts like this:
.content {
max-width: 600px;
min-width: 240px;
margin: 0 auto;
}
So the content divs are scaled down with browser window / viewport. This finally takes us to my problem:
Whenever I scale the width of my browser window down, the width of the content div also scales down and so the content itself gets longer, or taller should i say. This leads to situation where current point of focus in content moves down. Especially bad this is when switching mobile device from landscape to portrait orientation or vice versa.
I'm now trying to find solution that scales the height of content both up and down, keeping the current vertical focus point on the screen. Does anyone have any ideas how this could be done in HTML, CSS or JS? Content divs have unique ids, single div not being very long so I guess that at least with JS this should be possible by somehow tracking the currently displayed id?
I hope I got some sense to this, while english not being my native language.
Thanks.
I think what you should do is set the <p> width fixed to the min-width of div.content, so it will never change it's width, but the parent <div> will, according to the current orientation.
You can see an example here: http://jsfiddle.net/dyjXC/1/
CSS:
body{ width: 300px; } /* portrait or landscape */
div.content
{
max-width: 600px;
min-width: 240px;
background: salmon;
border-bottom: 1px solid green;
}
div.content > p
{
text-align: center; /* I centered both the text and... */
margin: 0px auto; /* ... the p itself, but you can use default to left */
width: 240px;
background: lightgray;
}
I hope it works as expected.