I'm stuck here. I can't quite figure out the correct syntax to get the layout of my site exactly right.
I am attempting to have a side navigation of a fixed width that is 100% height, then a top nav that is fixed height that is 100% width, finally I want my content to take up the remaining space and have independent scrolling.
The issue I am having is that the content scroll bar is being overlapped by the topNav bar.
I currently have my CSS set up as follows:
body
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.sideNav
{
width: 100px;
height: 100%;
float: right;
position: absolute;
top: 0;
left: 0;
background-color: green;
z-index: 3;
}
.topNav
{
width: 100%;
height: 65px;
background-color: gold;
float: right;
position: relative;
z-index: 2;
text-align: right;
}
.content
{
width: 100%;
height: 100%;
z-index: 1;
background-color: blue;
overflow-y: scroll;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
bottom: 0;
right: 0;
padding-left: 100px;
border: 2px red inset;
margin-top: 65px;
}
Here is the Fiddle as I know this sounds confusing: jsFiddle
Let me know if there is anything else I can provide. I've exhausted all of my ideas.
You almost had it working. Just needed to remove the float on the sidebar (it's being positioned absolutely, so there's no need for it), and then offset its position from the top by the height of the top nav. Like so...
.sideNav
{
width: 100px;
height: 100%;
/*float: right; - not needed */
position: absolute;
top: 65px; /* offset by the height of the top nav bar */
left: 0;
background-color: green;
z-index: 3;
}
.content
{
width: 100%;
height: 100%;
z-index: 1;
background-color: blue;
overflow-y: scroll;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
/* bottom: 0; - position from top instead for consistency */
top: 65px;
right: 0;
padding-left: 100px;
border: 2px red inset;
/* margin-top: 65px; - no longer needed */
}
here's the updated fiddle http://jsfiddle.net/7cRL3/
Related
I'm trying to create a normal HTML page and I've set the height/width of the body With Vh and Vw
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow: auto;
}
.Top-banner {
position: absolute;
top: 0;
left: 0;
height: 10%;
width: 100%;
background-color: blue;
box-sizing: border-box;
}
.Ad {
position: absolute;
top: 10%;
left: 0;
height: 15%;
width: 100%;
background-color: purple;
text-align: center;
box-sizing: border-box;
}
.Ad .Close-but {
position: absolute;
top: 65%;
left: 5%;
height: 30%;
width: 10%;
background-color: green;
text-align: center;
}
.Main-content {
position: absolute;
top: 25%;
left: 0;
height: 100%;
width: 100%;
background-color: pink;
text-align: center;
box-sizing: border-box;
}
<div class="Top-banner">
</div>
<div class="Ad">
<button class="Close-but">Close</button>
</div>
<div class="Main-content">
</div>
The problem is that an extra content create on the left its the body what am I doing wrong
I cannot put an jsfiddle demo because in the demo this problem don't happen I tried the HTML page in other computers and the same issue
Not sure if understand your question correctly but if your problem is the horizontal scrollbar then simply change 'overflow: auto;' to 'overflow-x: hidden;'
if you don't want a vertical scroll aswell then make 'overflow: hidden;'
body{
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow-x: hidden; //change this
}
As demonstrated here: http://codepen.io/anon/pen/rVPqeL
I am using 3 simple divs and I want to obtain an effect of a "global" scrollbar that has to go over the header.
The html is very basic
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
</div>
and here's the css:
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
.content {
margin-top: 50px;
min-height: 2500px;
background-color: blue;
}
The scrollbar keeps going under the header div. What am I doing wrong?
The below code does the trick
http://codepen.io/anon/pen/XbOxgp
.container {
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
z-index: 2;
}
.content {
z-index: 1;
width: 100%;
position: absolute;
top: 60px;
min-height: 2500px;
background-color: blue;
}
If I understand correctly you want the scrollbar always ontop. To do so change your css to the following
html{
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
Scroll on html will allow the entire page to have scroll while keeping header static and remove scroll from container.
.container {
margin-top:50px; /* create room for header*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
margin-top:-50px; /* move up by 50px*/
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
fixed positioned elements have "no width and height".
Hope it helps :)
EDIT: See this pen: This
Ps. I guess you also want to remove the margin of .content
i tried with replacing position:fixed with position:sticky and added top:0 and it worked well for me, no more overlapping vertical scrollbar.
.header {
position: sticky;
top: 0;
width: 100%;
height: 50px;
background-color: red;
}
Remove overflow-y: scroll; from your .container
put the overflow-y: scroll; inside the body element:
body {
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
I am using two divs to create the look of a two-tone background. behind my container div, the left side is blue and the right side is yellow. My css for these column divs is:
#bluecol{
height:100%;
background-color: #5C8AE6;
display: inline;
float: none;
left: 0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;}
and for the yellowcol is the same, except positioned to the right, naturally. Currently both divs works fine but I cannot get them to match the height of the content within my container, I can only set the height manually or to 100%, which only takes up the browser's window. My container is set to height:max-content so is unhelpful in this situation.
I want the two column divs to match whatever the containers height is. Any suggestions would be great!
Js fiddle: https://jsfiddle.net/ak0kp9xd/
Try like this: Demo
html, body {
height: 100%;
overflow: hidden;
position: relative;
}
#bluecol {
height:100%;
background-color: #5C8AE6;
display: inline;
float: none;
left: 0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;
}
#yellowcol {
height:100%;
background-color: rgb(255, 204, 0);
display: inline;
float: none;
right:0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;
}
#container {
background-color:#E5ECFB;
font-family:'calibri';
margin:10px;
overflow:hidden;
z-index:5;
font-size:medium;
height: 100%;
}
Your background blocks must be inside #container to take it's height.
Also you can use :before to reduce HTML markup:
#container {
position: relative;
background-color: rgb(255, 204, 0);
padding: 10px;
}
#container:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background-color: #5C8AE6;
display: block;
z-index: 1;
}
#container .content {
position: relative;
z-index: 10;
background-color: #E5ECFB;
border-right: 11px solid #FFE994;
border-left: 11px solid #AFC6F3;
}
<div id="container">
<div class="content">Whatever</div>
</div>
I am not sure if this is possible, without some JavaScript at lest. What i am trying to do is keep the content in the sidebar within the viewport for horizontal scroll but not vertical scroll (this issue occurs on low resolutions). I have put together a quick js fiddle to demonstrate the issue http://jsfiddle.net/evkhvvdr/ any input is greatly appreciated.
Here is the CSS or view the js fiddle
body {
position: relative;
margin: 0;
}
.sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
background: blue;
left: 0;
}
.sidebar-inner {
position: fixed;
left: 0;
}
.content {
width: 1400px;
background: pink;
height: 2000px;
}
You can fix sidebar on screen, but put it under content with z-index, so when you scroll, you scroll only content, sidebar is still on screen, but under the content.
body {
margin: 0;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100px;
background: blue;
z-index: 0;
}
.sidebar-inner {
width: 100px;
position: relative;
left: 0;
}
.content {
position: absolute;
width: 1400px;
background: pink;
height: 2000px;
margin-left: 100px;
}
I am currently building a chat window and now I am focusing on the styling part. I have set its attributes to fit any window size. But I am having some issue with the div id="bottomPanel". Inside that div I have a textarea that is overlapping and not fitting in properly. I tried changing the position to relative but it is not resolving the issue: How can I the bottomPanel div to fit properly and get the button to be to the right side? JSFIDDLE
Something like this :
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid #333;
}
#upperPanel {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 100px;
}
#chat {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 200px;
background: #666;
overflow: auto;
}
#friends {
position: absolute;
top: 0;
bottom: 0;
width: 200px;
right: 0;
background: #999;
overflow: auto;
}
#friends ul {
text-align: right;
}
#bottomPanel {
height: 100px;
background: #EEE;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
#bottomPanel textarea {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 120px;
resize: none;
}
#bottomPanel input[type=submit] {
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
width: 100px;
}
textarea {
width: 100%;
height: 100%;
position: relative;
}
Here is the Updated Fiddle
The textarea does not seem to work with absolute position + right + bottom sizing technique. The solution is to use a 100% wide and tall textarea wrapped inside desired size div.
In my example, I recycled #bottomPanel instead of adding a new div. I adjusted padding so that its inner dimensions matches the desired size of textarea. The important rules are:
#bottomPanel {
background: #EEE;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
/* CHANGED */
height: 80px;
padding: 10px 120px 10px 10px;
}
#bottomPanel textarea {
resize: none;
/* CHANGED */
box-sizing: border-box;
margin: 0;
width: 100%;
height: 100%;
}
#bottomPanel input[type=submit] {
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
width: 100px;
}
Put 2 inline divs in the bottom panel. Left and Right the Left is for the textarea, the right is for the button.
Change the #bottomPanel textarea to relative and remove the absolute positions.
Edit:
Another option could be to just put the textarea in the same div as the chat area, and the button in the same div as the user list.
I think what you want to achieve is this Demo.you just did a mistake in arranging textarea