Hi I tried all possible css combinations i can think of ,but i cannot manage to create a layout like this.
everything scrolls including navbar and Tab controlls.
<el-row>
<el-menu class="el-menu-demo" mode="horizontal"> ..</<el-menu>
</el-row>
<el-row>
<el-tabs>
<el-tab-pane>...</el-tab-pane>
<el-tabs>
</el-row>
final expected outcome
This has nothing to do with Vue.JS, but it's just plain CSS that is of problem here.
Typically, to have such "full-window" layouts with fixed elements (like navbar, footer), it's best to use absolute positioning for these elements.
I've created a small JSFiddle that creates such a layout:
https://jsfiddle.net/5wgb94kv/
Basic ideas:
the navigation bar is positioned absolutely to the top of the window with a fixed height (in CSS: position:absolute; top:0; height:25px;).
the tab bar is also positioned absolutely to the top, but below the nabber. (CSS: position:absolute; top:25px; height:25px;)
the footer is positioned absolutely to the bottom (CSS: position:absolute; bottom:0; height:25px;)
the content is positioned absolute as well, with the correct insets from top and bottom, and with overflow-x set to scroll. CSS: position:absolute; top: 50px; bottom:25px; overflow-x: scroll;
See the jsfiddle for the full css details.
Related
I want to make a div that follows the viewport. I am not able to use fixed positioning. For some reason the div doesn't follow the viewport properly, it always 'lags' behind, especially when changing scroll direction. You can see what I mean on plunker here.
That is the first part of the problem. The second is that I need the div to immediately move into the viewport when it appears. (Clicking anywhere in the output panel in the plunker will toggle the div to appear). The *ngIf part of the appearing is important because in my actual app I am using a component with entry animations instead of a div, so no [hidden] I'm afraid.
So why can't I use fixed positioning?
Basically, fixed positioning causes the element to calculate the width differently to its sibling elements when the viewport contains scrollbars. I also can't use the overflow: scroll trick on the element because it has shadows that get clipped by the viewport. It also looks ugly having two scrollbars.
Here is a fixed centered div in a wrapper using flex.
Demo Here
#wrapper{
position:absolute;
width:100%;
height:100%;
position:fixed;
display: flex;
justify-content: center;
}
#my-app{
position:relative;
width:50%;
height:50%;
background-color:green;
}
<div id="wrapper">
<div id="my-app">
</div>
</div>
I have a footer that have this css style
position: absolute;
bottom:0;
left:0;
right:0;
width:100%;
background-color:#000000;
color:#ffffff;
text-align:center;
but if I open the browser in a small window (so without see all the content of the page) the footer is on the bottom and when I scroll down footer remains fixed in the middle of the page!
How can I solve?
is your parent container (parent of footer) set to position:relative. try setting body to position:relative or footer to position:fixed and body to padding-bottom: height of your footer (so it doesn't cover the content).
Hope it helps
I think you have to use position: fixed; to have the desired output.
absolute position make your footer on the bottom of the current height of the window, relative to the parent (here the parent is the body) when you load it. (So when you scroll in doesn't follow the scroll to the bottom)
An element with position:fixed is fixed with respect to the viewport.
It stays where it is, even if the document is scrolled.
Fiddle
Here's the wiki about difference between absolute/fixed position
https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning
I have a site based on foundation 5 & angularjs with the following layout:
header
-left-nav
--content
footer
Currently the left nav is absolute positioned to the left with an initial height of 100% (top:0, bottom:0)
The content div changes in height as to what is being loaded into it (via ajax). I'm manually adjusting the height of the left-nav div when the content height changes, but I was wondering if there was a way with html/css that would enable me to get rid of this script.
I've tried using all the techniques i've found through googling, but none seem to work without the javascript.. I need the left nav to always been 100% of the page height as it has a dark background that stretches to the bottom of the page.
Many thanks,
Ben
Update
Its working in this jsfiddle.net
This FIDDLE has an "add content" button which will show you it working with dynamic data.
I just changed this ...
.small-fixed-130-left.column {
position:absolute;
width:11.4285714286rem;
top:0;
left:0;
bottom: 0;
}
You could position: fixed; the left nav with a height: 100%;
Im working on a website template and i want to make photo on the top.
Well I used the position absolute then I set top to -50px and left to -50px.
It work perfectly but I have one issue the scroll bar appear on bottom.
This is the css for the div :
#moon {
background-image:url('img/moon.png');
width:289px;
height:289px;
position:absolute;
top:-150px;
left:-160px;
overflow:hidden;
}
Give the body overflow-x: hidden
Also notice that on small screens there will be no horizontal scrollbar(!), unless you'll handle it specifically with responsive CSS.
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/