I am trying to create RWD layout with header, footer, left and right navbar and main content, however still something is incorrect. I would like to have scrollable main content and footer but main content is still overlapped by footer.
Any hint would be appreciated
https://jsfiddle.net/camel99/Lqhary5g/5/
//html
<div id="main">
<header id="header">
header
</header>
<div class="wrapper">
<ng-container *ngIf="leftSidebarEnabled">
<div class="sidebar-left sidebar">
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
</div>
</ng-container>
<ng-container *ngIf="rightSidebarEnabled">
<div class="sidebar-right sidebar">
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
</div>
</ng-container>
<div class="main" [ngClass]="getCssClassesForMainMenu">
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?" "Sed ut perspiciatis unde
omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?" "Sed ut perspiciatis unde
omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?" "Sed ut perspiciatis unde
omnis iste natus error sit voluptatem accusantium doloremque laudantium,
</div>
</div>
<footer id="footer">
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
</footer>
</div>
//css
$headerFooterColor: #4b4276;
$headerFooterHeight: 50px;
$sidebarWidth: 15%;
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
text-align: center;
}
#main {
display: flex;
flex-direction: column;
}
#header {
font-size: 1rem;
height: $headerFooterHeight;
background-color: $headerFooterColor;
text-align: center;
color: white;
width: 100%;
left: 0;
position: fixed;
z-index: 1;
top: 0;
height: $headerFooterHeight;
}
.wrapper {
display: flex;
flex: 1 0 0;
margin-top: $headerFooterHeight;
.sidebar {
margin: 0;
padding: 0;
width: $sidebarWidth;
background-color: #b9bcc9;
position: fixed;
height: calc(100% - (2 * #{$headerFooterHeight}));
height: calc(100% - (2 * #{$headerFooterHeight}));
height: calc(100% - (2 * #{$headerFooterHeight}));
margin: 0 auto;
color: white;
}
.sidebar-left {
left: 0;
order: -1;
}
.main {
background-color: rgba(160, 194, 227, 0.5);
text-align: center;
color: white;
width: 70%;
height: calc(100% - (2 * #{$headerFooterHeight}));
overflow: auto;
flex: 1 0 0;
&.fullWidth {
width: 100%;
}
&.leftSidebarEnabled {
margin-left: 15%;
width: 85%;
}
&.rightSidebarEnabled {
margin-right: 15%;
width: 85%;
}
}
.sidebar-right {
right: 0;
order: 1;
}
}
#footer {
font-size: 1rem;
position: fixed;
width: 100%;
bottom: 0;
height: $headerFooterHeight;
left: 0;
background-color: $headerFooterColor;
text-align: center;
color: white;
overflow: auto;
z-index: 1;
}
Place the footer inside .main and then in your CSS file changed position: fixed inside footer to relative. Change sidebar height to height: 100vh
Related
I am developing an app with Ionic and I have some scrolled content with a transparent gradient div that occupies half of this scroll content.
I can scroll over the text that doesn't have this div on top but not on the down half part of the scrollable content.
.terms-scroll {
margin-top: 32px;
height: 400px;
overflow-y: scroll!important;
overflow-x: hidden!important;
padding-right: 42px;
background-attachment: scroll;
}
.white-gradient {
background-attachment: scroll;
background: linear-gradient(to bottom, rgba(255,255,255,0.001) 0%, rgba(255,255,255,1) 100%);
width: 100%;
height: 50%;
position:fixed;
right:0;
margin-right: 50px!important;
bottom:0;
margin:0;
padding:0;
z-index: 10;
}
<div class="terms-scroll">
<p class="branding text-secondary">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?""Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?""Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<div class="white-gradient"></div>
</div>
here is an example
https://jsfiddle.net/pqLbvar1/1/
Thanks for any help!
Add pointer-events: none; to .white-gradient so that you can scroll through the div.
.terms-scroll {
margin-top: 32px;
height: 400px;
overflow-y: scroll!important;
overflow-x: hidden!important;
padding-right: 42px;
background-attachment: scroll;
}
.white-gradient {
background-attachment: scroll;
background: linear-gradient(to bottom, rgba(255,255,255,0.001) 0%, rgba(255,255,255,1) 100%);
width: 100%;
height: 50%;
position:fixed;
right:0;
margin-right: 50px!important;
bottom:0;
margin:0;
padding:0;
z-index: 10;
pointer-events: none;
}
<div class="terms-scroll">
<p class="branding text-secondary">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?""Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?""Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<div class="white-gradient"></div>
</div>
JSFiddle: https://jsfiddle.net/pqLbvar1/6/
I'm attempting to achieve the following layout based on this PhD thesis:
But is there a pure CSS way to take HTML citations out of one column and placing them in line in the other column?
.Grid {
display: flex;
}
.Grid-cell {
border: 1px solid black;
}
.Grid-cell:nth-of-type(1) {
flex: 1 1 70%;
}
.Grid-cell:nth-of-type(2) {
flex: 1 1 30%;
padding-left: 20px;
}
q {
/* Insert here */
}
<div class="Grid">
<div class="Grid-cell">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi <q cite="http://www.mashable.com/">nesciunt</q>. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div class="Grid-cell"><!-- Insert here --></div>
</div>
I think you might be overthinking this one a bit. You don't need to set it up as a flex layout and you don't need to copy elements from one location to another. All you really need is to break a q element out of flow and display it in a predefined margin. We can do this using only padding-right and position: absolute.
Example here:
.Grid {
padding-right: 30%;
}
.Grid-cell {
border: 1px solid black;
}
q[cite] {
position: absolute;
left: 75%;
max-width: 20%;
}
q[cite]:before {
content: attr(data-index);
}
<div class="Grid">
<div class="Grid-cell">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi<sup>1</sup> <q data-index="1. " cite="http://www.mashable.com/">nesciunt</q>. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
If you don't define a top or bottom property on absolutely positioned elements, they determine where they land based on where they'd appear in document flow. Therefore, by only setting position: absolute and left: 75% we've broken your citation out, kept it in-line with its source, and using the data-index property in conjunction with a content: attr(data-index); even given you the ability to number your citations to match their source inline.
Not using flexbox.
But using an internal span and positioning this can be achieved.
Incidentally, I have used a cite tag in place of the q tag as q renders automatic quotes. It may be possible to remove them using CSS but I haven't looked into that.
.Grid {
display: flex;
}
.Grid-cell {
border: 1px solid black;
}
.Grid-cell:nth-of-type(1) {
flex: 1 1 70%;
position: relative;
}
.Grid-cell:nth-of-type(2) {
flex: 1 1 30%;
padding-left: 20px;
}
sup {
font-weight:bold;
color: red;
font-size:.6em;
}
cite span {
position: absolute;
right:0;
margin-right: -8em;
}
<div class="Grid">
<div class="Grid-cell">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi<sup>1</sup><cite cite="http://www.mashable.com/"><span>1. My Citation</span></cite>. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div class="Grid-cell"><!-- Insert here --></div>
</div>
Can someone please explain why the second & third divs in the following snippet appear to blend with the image? For clarity, the question here is about why the opacity of the content element seems to affect layer order.
The image is an animated gif with no transparency. In the upper div everything seems to behave as expected. The image swirls around with it's white background blocking the text content of the div below it.
In the lower two divs I've decreased opacity and somehow this creates the effect of the text being superimposed over the image. This is further illustrated in the third div where I've set a background color on the wrapper. The whole thing is just confusing and unexpected for me.
div.wrapper {
position: relative;
padding: 15px;
border: 1px solid #ddd;
}
img.loader {
position: absolute;
left: calc(50% - 32px);
top: calc(50% - 32px);
}
div.content-b,
div.content-c {
opacity: .5;
}
div.wrapper-c {
background-color: #bbb;
}
<div class="wrapper">
<img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
<div class="content-a">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>
<div class="wrapper">
<img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
<div class="content-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>
<div class="wrapper wrapper-c">
<img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
<div class="content-c">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>
The stacking along the z-axis rules say that:
The order of sibling - based on which comes is first taken into consideration
A positioned sibling element is stacked over the static element - so the img should be over the div ideally.
Other properties like position which affects stacking context includes opacity, transform.
See these excerpts from MDN: stacking context
A stacking context is formed, anywhere in the document, by any element
which is either
the root element (HTML),
positioned (absolutely or relatively) with a z-index value other than "auto",
a flex item with a z-index value other than "auto",that is the parent element display: flex|inline-flex,
elements with an opacity value less than 1. (See the specification for opacity),
elements with a transform value other than "none",
elements with a mix-blend-mode value other than "normal",
elements with a filter value other than "none",
elements with a perspective value other than "none",
elements with isolation set to "isolate",
position: fixed
specifying any attribute above in will-change even if you don't specify values for these attributes directly (See this post)
elements with -webkit-overflow-scrolling set to "touch"
You can fix it by putting the img below the div - see demo below:
div.wrapper {
position: relative;
padding: 15px;
border: 1px solid #ddd;
}
img.loader {
position: absolute;
left: calc(50% - 32px);
top: calc(50% - 32px);
}
div.content-b,
div.content-c {
opacity: .5;
}
div.wrapper-c {
background-color: #bbb;
}
<div class="wrapper">
<div class="content-a">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
<img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
</div>
<div class="wrapper">
<div class="content-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
<img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
</div>
<div class="wrapper wrapper-c">
<div class="content-c">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
<img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
</div>
You should give higher z-index to img then it sit above all.
z-index: 9999;
If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.
Is there any way to have a scrollable div in a page where all the other contents are fixed but that div is scrollable by the window scrollbar instead of it's own scroll?
Thanks in advance
If you know what the dimensions of the fixed content are, i.e. the offset from the edges of the window to the edges of the scrolling content, then really all you need to do is put margins on the scrolling content. Then the fixed content is displayed in the margins, as it were.
html, body {
height: 100%;
margin: 0;
color: #000
}
header {
display: block;
position: fixed;
top: 0;
padding: 0 1em;
line-height: 3;
width: 100%;
background: #FBB
}
nav {
display: block;
position: fixed;
left: 0;
top: 3em;
bottom: 3em;
padding: 1em;
width: 7em;
background: #BBF
}
aside {
display: block;
position: fixed;
right: 0;
top: 3em;
bottom: 3em;
padding: 1em;
width: 7em;
background: #BFF
}
main {
display: block;
margin: 3em 9em 3em 9em;
padding: 1em;
background: #FFB
}
footer {
display: block;
position: fixed;
bottom: 0;
padding: 0 1em;
line-height: 3;
width: 100%;
background: #BFB
}
<header>This is the fixed header</header>
<nav>And the fixed nav bar.<br />
Go to top<br />
Go to bottom
</nav>
<aside>And the fixed sidebar.
<br />With some content.</aside>
<main>This is the scrolling content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<br />At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<span id="bottom"></span>
</main>
<footer>And the fixed footer</footer>
I gave everything different colours to make it clear what the trick is, but you can give all the fixed containers the same background colour, naturally.
I asked a question earlier today and got a answer I accepted, and it seems to work, except the problem that occur when the column content become larger than browser window because I can't scroll down.
Is there any way to get same result as given in my accepted answer in previous question, without use of absolute values?
This is the problem that I need help to solve
Link to previous question
Link to jFiddler that show the problem jsfiddle.net/HKJvP/
Check out this one
HTML
<div class="left-fixed">
Left side here!
</div>
<div class="floating-container">
<div class="left">
Center Fluid<br/>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
<div class="right">
Right '200px width'<br/>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
CSS
body, html{
height: 100%;
overflow-y: auto;
margin: 0;
}
.left-fixed {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 230px;
background-color: green;
}
.floating-container {
background-color: red;
height: 100%;
margin-left: 230px;
}
.floating-container .left {
float: left;
width: 50%;
background-color: yellow;
min-height: 100%;
}
.floating-container .right {
float: right;
width: 50%;
background-color: blue;
min-height: 100%;
}
Demo: Fiddle
This is the css you should be looking at....display: should be inline.... This is for two colums... do the same thing for 3 columns.... and another thing don't set the height. It should be automatically increasing with content....It helps for dynamic pages too...
.wrapper{overflow:hidden; width:90%; padding:30px; margin:0 0 0 5%; }
.wrapper .right {width: 80%;
padding-right: 20px;
float: right;
display: inline;
border: solid #000 1px 2px 2px 1px;
padding:10px;
}
.wrapper .leftbar {
width: 15%;
float: left;
display: inline; padding:10px;
}