I am trying to get a page with 2 main elements, one side-panel that takes 20% of the viewport width and has the position fixed and the other would be the main window, taking 80% of the remaining space.
However it seems that giving the side panel a position: fix; top: 0 removes all of its flex properties.
Desired behavior: How can you manage to place a side panel in a proportional width of the screen and also have it keep its position fixed at top:0 ?
Note: It would be best if I could not use position: sticky
Here's a codepen to help. https://codepen.io/phil94/pen/vYORpMj
`
#side-panel {
bottom: 0px;
position: fixed ;
background: #acacac;
border: solid 3px;
width: 20%;
height: 100vh;
z-index: 1;
}
#container {
background: #3687d7;
display: flex;
}
#main {
background: #acacac;
border: solid 3px;
width: 80%;
height: 1200px;
}
<app>
<div id="container">
<div id="side-panel">
<ol>
<li>Tomatoe</li>
<li>Bananas</li>
<li>Pickles</li>
</ol>
</div>
<div id="main"></div>
</div>
</app>
Try this: position: sticky;
#side-panel {
bottom: 0px;
position: sticky;
top:0;
background: #acacac;
border: solid 3px;
width: 20%;
height: 100vh;
z-index: 1;
}
Related
I'm building a fullscreen modal, and I'm trying to center the content vertically when it is smaller than the screen, and to start at the top and allow scroll, when the hight is larger than the hight of the container. I'm trying to use position:fixed to position the container on the screen, and display:flex; align-items:center; to center the inner div. When the container is shorter than the inner div the top part of the inner div is cut out, even when I use: overflow-y:scroll.
Here is my code:
<div class="modal">
<div class="inner-w">
hello world
<div class="long-box">
</div>
</div>
</div>
.modal {
position: fixed;
bottom: 70px;
top: 0;
left:0;
right: 0;
display: flex;
align-items: center;
padding: 15px;
overflow: scroll;
}
.inner-w {
margin: 50px 0;
width: 100%;
}
.long-box {
height: 400px;
width: 100%;
border: 1px solid brown;
}
here is a jsfiddle: https://jsfiddle.net/benCarp/bh2Lfpo4/18/#&togetherjs=aKbe8NLJSR
add to .modal{flex-direction-column;} now you can remove the margin
.modal {
position: fixed;
bottom: 70px;
top: 0;
left:0;
right: 0;
display: flex;
flex-direction:column;
align-items: center;
padding: 15px;
overflow: scroll;
}
.inner-w {
width: 100%;
}
.long-box {
height: 400px;
width: 100%;
border: 1px solid brown;
}
<div class="modal">
<div class="inner-w">
hello world
<div class="long-box">
</div>
</div>
</div>
#godfather had an excellent suggestion to change the direction of the flex container from row to column with .modal{flex-direction-column;}. It better describes our layout, and the width and margin property aren't needed any more. However it is not enough. overflow: scroll (or "auto") property isn't inherited, and should be placed on the actual element that overflows - the .inner-w class.
Here is how the css should look:
.modal {
position: fixed;
flex-direction:column;
bottom: 70px; // kept for a button
top: 0;
left:0;
right: 0;
display: flex;
padding: 15px;
justify-content: center;
}
.inner-w {
overflow: auto;
}
.long-box {
height: 400px;
width: 100%;
border: 1px solid brown;
}
I want to use position: absolute to create a centered element, but it will create a horizontal scrollbar on Internet Explorer 11. Please see the script below. Anyone here knows how to fix this problem?
*Update: I figured out that using overflow:hidden seems to solve this problem somehow. But when there are another one outside of the container, it will be hidden as well.
.container {
width: 80%;
margin: 0 auto;
height: 100vh;
border: 1px solid green;
position: relative;
overflow: hidden; /*This one is not the solution, though*/
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%, 0);
border: 1px solid red;
}
.another-content {
width: 40px;
height: 40px;
border: 1px solid blue;
position: absolute;
bottom: 20px;
right: -20px;
}
<div class="container">
<div class="content"></div>
<div class="another-content"></div>
</div>
You need to add following properties with the position absolute in IE
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0; //specify all including bottom:0
The scrollbar show up in all browsers, not only IE. You can do the following:
The biggest issue is that the left: 50% and width: 80% together are adding to the total width and forcing the horizontal scrollbar to show up in some browsers (e.g. Internet Explorer and MS Edge). You set the width to 80%, so divide the remaining 20% between the left and right border and you'll end up with 10% each. Simply use left: 10% to achieve the same result, but without the side effect of the horizontal scrollbar.
Also when you set the size to 100% and then add border, those borders will be out of the view and cause the scrollbars to show up. This is the same in all browsers. Use box-sizing: border-box to force the browser to include the border in the height and width calculation.
The height: 100vh makes the box height equals to the view port. However, the body has default margins which vary from one browser to another. You can either set those margins to zero body { margin: 0; }, or change the height to height: 100% which is 100% of the container which the body in this case.
Try this:
.container {
width: 100%;
height: 100%;
border: 1px solid green;
position: relative;
box-sizing: border-box;
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 10%;
border: 1px solid red;
}
<div class="container">
<div class="content"></div>
</div>
Thanks for your replies. Though they are not direct solution, they helped me a lot to figure out how to solve it.
The cause is as what Racil Hilan said. When I use left:50% and width:80%, the content width will be added up and create a horizontal scroll, which is not ignored by only IE. And my point is to avoid creating that added-up width. Here is my two way to workaround this one.
* {
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
border: 1px solid green;
position: relative;
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 0;
right: 0;
border: 1px solid red;
margin: 0 auto;
}
.content-wrapper {
border: 1px solid black;
height: 30px;
position: absolute;
top: 100px;
left: 0;
right: 0;
}
.another-content {
width: 80%;
display: block;
height: 100%;
border: 1px solid red;
margin: 0 auto;
}
<div class="container">
<div class="content"></div>
<div class="content-wrapper">
<div class="another-content"></div>
</div>
</div>
I have a <div> in which I am trying to keep a constant aspect ratio in (because the inner elements will need to be squares). I have been able to work out the CSS so that when you make the window less wide, the height will shrink accordingly and that works great. However, when I make the window more wide, the <div> keeps expanding beyond the height of the parent. How can I stop this .BoardWrapper <div> from expanding past its parent?
.BoardWrapper {
width: 100%;
padding-bottom: 50%;
position: relative;
border: 1px solid red;
}
.Board {
position: absolute;
top: 5px; bottom: 5px; left: 5px;right: 5px;
border: 1px solid green;
}
.Left {
height: 100%;
position: absolute;
left: 0; right: 30px;
border: 1px solid blue;
}
.Right {
height: 100%;
width: 20px;
float: right;
border: 1px solid black;
}
.Container {
position: absolute;
top: 10vh; bottom: 5vh; left: 5vw; right: 5vw;
}
<div class='Container'>
<div class='Right'></div>
<div class='Left'>
<div class='BoardWrapper'>
<div class='Board'></div>
</div>
</div>
</div>
I do not really want to have to deal with a JS solution here since these are all React components. However, a solution that incorporates React or Semantic-UI would be fine (although, it seems like there should be a raw CSS solution).
I'd prefer not to edit .Left, .Right, or .Container, but I can certainly add in extra elements if it would help.
Remove the padding-bottom
.BoardWrapper {
padding-bottom: 50%;
}
and add height
.BoardWrapper {
height: 100%;
}
Working Example:
https://jsfiddle.net/zwp8vwob/
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
I am trying to implement cosntruction, described here.
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
border: solid 1px blue;
height: 90%;
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
}
The whole page has background color (gray), header and footer are transparent (so you can see the page's background through it) and the content block has red background. Despite the fact that content part is stretchable it doesn't fill with the background the whole block, only the actual.
Is it possible to fill the whole content block with the color?
While minimizing window the footer floats on content. is it possible to disable such behaviour?
Here is a workaround of what you are looking for. Hope this helps.
Add this lines of code below to your code:
#main{
position: absolute;
top: 33px;
bottom: 33px;
left: 0;
right: 0;
}
#wrap{
position: relative;
}