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;
}
Related
I am not getting the scroll on the browser. i have tried with overflow: scroll and also with no over flow.
body {
margin: 0;
overflow: scroll;
}
.left {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 320px;
background-color: #1f1f1f;
color: white;
text-align: center;
}
.slide {
position: fixed;
top: 0;
right: 0;
height:450px;
width: 1041px;
background-color: orange;
text-align: center;
}
.meanu {
position: fixed;
top: 50%;
bottom: 50%;
width: 80%;
left: 20%;
right: 0;
}
That is because everything is position:fixed and these elements do not affect the flow.
As far as scrolling is concerned, the fixed positioned elements do not exist.
body, html {
height: 100%;
}
#nav-left {
width: 155px;
min-height: 100%;
background-color: #292a28;
position: absolute;
z-index: 10;
}
When on my page, height growing up (dynamic), my height on div did not growing up.page
Try this
html, body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
}
#nav-left {
width: 155px;
min-height: 100%;
background-color: #292a28;
position: absolute;
z-index: 10;
}
Working example: http://liveweave.com/9gb8mF
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 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
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/