I have a task to build a sidebar, whose height is equal to the content one.
The more content is, the bigger sidebar is.
In reality, my sidebar is equal to the window size, not content. If I scroll the page down, there is no sidebar on it.
That's me code:
HTML:
<div class = "container" style = "height :100%">
<div class = "row" style = "height:100%">
<div class = "col-md-3 hidden-xs hidden-sm" style = "height:100%">
<div class = "sidebar">
.........
</div>
</div>
</div>
</div>
CSS:
html .sidebar,
body .sidebar {
height: 100%;
width: 100%;
background: black;
}
Why? What to do to make it work?
If I get what you mean properly, then you want the sidebar to be fixed?
In order to do this you can do something a bit like this in the css..
.sidebar {
width: 250px;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: black;
}
<div class="sidebar">
</div>
Related
I have this layout for an HTML page with :
Top menu
Left menu
Content div
HTML:
<div class='body-content app'>
<div class="top">
<div class="info"><div _ngcontent-c17="">Version:1.05.20.20 </div></div>
<div _ngcontent-c17="">
<a _ngcontent-c17="" class="ui link ng-star-inserted">Setup 1</a>
| <a _ngcontent-c17="" class="ui link custom-setup-link">Setup 2</a>
| <a _ngcontent-c17="" class="ui link logout-link"> Log out </a>
</div>
</div>
<div class="side-menu">
<div *ngFor="let item of items; let i = index">
Menu # {{i}}
</div>
</div>
<div class="content">
<div *ngFor="let item of items; let i = index">
Menu # {{i}}
</div>
</div>
</div>
CSS:
.top {
height: 44px;
background-color: #0078bf;
position: fixed;
top: 0;
width: 100%;
z-index: 3;
color:white;
}
.side-menu {
width:70px;
position: fixed;
top: 44px;
height: calc(100% - 44px);
background-color: #0078bf;
z-index: 2;
color:white;
}
.content
{
margin-left: 80px;
margin-top: 54px;
}
.content div{
padding-left: 80px;
height: 300px;
background-color:black;
margin:10px;
}
A demo of init code. I have a task to add font resizing via setup on UI. But I am having problems doing it, because menus are position fixed and top and height is constant in styles.
I can do it by recalculating it and changing using [style.top], [style.height] or [ngStyle] directive. But I want to get common solution with CSS and HTML, if it is possible.
I was also trying to change height, width and margin to em units, but it's not working for all scenarios with different size of fonts from 10px to 40px; I tried to remove some styles from the CSS that helped me with font-resizing.
height from .top class,
top and width from .side-menu class
margin-top and margin-left from .content class
padding from children divs of .content div
But I have an artifact during scrolling. A demo of what I have.
Using Sticky is not best solution you can try
position :relative;
Position sticky is something you use when you want a element to sticky while scrolling
for example refer this
I'm trying to create a footer that stays below the page content and sticks to the bottom of the page. I've tried applying Twitter Bootstrap 3 Sticky Footer to my page, but it causes the footer to stick to the bottom and overlap the page content (if the page is too short).
I'm currently using the css:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 348px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 348px;
}
and the html: (simplified)
<body>
<!-- Navigation -->
<div class="wrapper">
<div class="container"
page content
</div>
</div>
<footer class="footer navbar-fixed-bottom">
<!-- Footer-->
</footer>
</body>
and the footer is now sticking to the bottom, but when the page is very narrow, you can see through to the background instead of the footer background covering it.
Image
Any help in resolving this would be greatly appreciated.
Seeing that you have used jQuery. Along with removing the height from footer, a simple resize() event can decide the correct margin-bottom.
$(window).resize(function(){
var xHeight = $('.footer').height();
$('body').css('margin-bottom',xHeight + 'px');
})
Hope this helps
Problem is with the height. Just remove the height from footer then it will be fine.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 348px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
<!----html---->
<body>
<!-- Navigation -->
<div class="wrapper">
<div class="container">page content</div>
</div>
<footer class="footer navbar-fixed-bottom"></footer>
</body>
I'm having trouble setting up a "master-detail" view using Bootstrap 3. I'm attaching a picture of the specific layout I'm trying to get:
I've created a div with .row spanning the 12 columns for the header, and then another div.row with a div.col-md-4 and div.col-md-8 for the two columns. But obviously this doesn't achieve what I'm looking for. I've tried playing with the position attribute, but it seems to conflict with the Bootstrap CSS and I always just get jumbled text.
Thank you very much in advance and let me know if you'd like me to provide more details on what I'm looking for. Hopefully the pic is clear.
You are looking for
position: fixed;
This ensures that the element is always static relative to the viewport. You will then use the relative positioning properties to place it where you want it to go.
For the top element (say, your navbar), you can set:
top: 0;
For the bottom element, you can set:
bottom: 0;
So, something like this:
.row, .col-md-4, .col-md-8 {
border: 2px solid pink; /* For showing the div borders */
}
.row.main-content {
background-color: blue;
height: 300px;
margin-top: 20px; /* Needs to match the height of .row.top */
}
.row.top {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: red;
z-index: 9999;
}
.row.bottom {
position: fixed;
bottom: 0;
height: 20px;
width: 100%;
background-color: green;
z-index: 9999;
}
.scrollable {
overflow-y: scroll;
height: 300px; /* May need to be set somehow */
}
<div class="container-fluid"><!-- To get it to take up the whole width -->
<div class="row top">
</div><!-- row -->
<div class="row main-content">
<div class="col-md-4">
<div class="sub-header">
</div>
<div class="scrollable">
<!-- menu items here -->
</div>
<div class="sub-footer">
</div>
</div>
<div class="col-md-8 scrollable">
<!-- Product detail goes here -->
</div>
</div><!-- row -->
<div class="row bottom">
</div><!-- row bottom -->
</div><!-- container-fluid -->
Hope that helps.
I've designed a website as you can see below, which has a FIXED header (white), then a sub-header, main content, sidebar (red) and a footer (grey).
I have created the wireframe for the website in HTML/CSS, but can't get the sidebar to work properly.
I would like the sidebar to start on the sub-header and go all the way to the bottom of the page to end after the footer (see the image below) no matter how much content there is in the main section, but I can't get it to work.
Please help! Here is my current efforts on JSFIDDLE, as you can see the sidebar doesn't go to the bottom of the page: http://goo.gl/EQ7CJh
Remove the position: relative from content div and use margin-top to position the panel, as shown:
#content {
height: 100%;
}
#sidebar {
border: 1px solid skyblue;
width: 100px;
position: absolute;
margin-top:7em;
top: 0px;
right:0px;
bottom: 0px;
}
Updated jsfddle
Can you try this jsFiddle http://jsfiddle.net/2ZhpH/1093/
I have changed the HTML structure and added the #sidebar css to this
#sidebar {
position:absolute;
top:48px;
border: 1px solid skyblue;
width: 100px;
position: absolute;
right: 0;
bottom: 0px;
}
Demo
If you want to have side bar to the side of The div which contains sub-header main and footer the you should have a Grid structure like this
<div id="header" class="...">
</div>
<div class="divide"> <!-- divide class to have like 85% width leaving rest of it for side bar -->
<div class="sub-header">
</div>
<div class="main">
</div>
<div id="footer">
</div>
</div>
<div class="sidebar">
</div>
I'm sure this has been asked quite some times however after quite some time searching for a solution I have finally resorted to asking a question here!
I am working on an HTML Help file for an application I am developing, where the file is split into two sections. One, a sidebar (floated to the left) and two, the main content section (also floating left).
The problem I am facing is that when the main content extends beyond 100% of the page height, the sidebar background stops.
I would use the faux column effect where I assign the a background image of my sidebar however to maintain my design's integrity I have to set a different background image for the body.
Check out this JS Fiddle I set up - http://jsfiddle.net/5gpFx/
Hopefully that can help you see what the issue is if I failed to communicate it well enough!
Cheers!
Just wrap both columns in a container and set the faux-column background on that - this way the body will be available for setting whatever image you want. I've made a simple example here: http://jsfiddle.net/5gpFx/2/
I had the same problem but I could not make work the solution with flexboxes above. So I created my own template, that includes:
a header with a fixed size element
a footer
a side bar with a scrollbar that occupies the remaining height
content
I used flexboxes but in a more simple way, using only properties display: flex and flex-direction: row|column:
I do use angular and I want my component sizes to be 100% of their parent element.
The key is to set the size (in percents) for all parents inorder to limit their size. In the following example myapp height has 100% of the viewport.
The main component has 90% of the viewport, because header and footer have 5%.
I posted my template here: https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
Html:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>