I have a main div contains two divs (one for heading and other for content). the main div is placed at the bottom of the html page with absolute positioning. When I hide content div, it sill takes up space in the bottom of the page.
I need to show only the header div to do a jquery toggle..
<div class="tll">
<div class="tllH">
</div>
<div class="tllC">
</div>
</div>
<style>
.tll{
background: yellow;
height: 100px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.tllH{
background: green;
height: 20px;
width: 100%;
}
.tllC{
background: magenta;
height: 80px;
width: 100%;
display: none;
}
</style>
For .tll, you set a height of 100px.
.tllH is only 20px and coincidentally .tllC is 80px.
This is because the height of main container is fixed,The solution is present in this fiddle.
Setting .tll{height: auto} fixed the issue!
Related
I want to create a left navigation bar with the position: fixed attribute so that it stands in place as we scroll down.
I have .fullPage div with display: flex to show these divs horizontally.
When I add position: fixed attribute to the left-navbar, second div container-fluid-center takes 100% of browser's width instead of 100% of available space.
<div class="fullPage">
<div class="left-navbar">
</div>
<div class="container-fluid-center">
</div>
</div>
.fullPage {
width: 100%;
height: 100%;
position: relative;
}
.fullPage .left-navbar {
width: 88px;
height: 100vh;
background: #fff;
border-right: 1px solid #e4e4e4;
position: fixed;
}
.fullPage .container-fluid-center {
width: 100%;
height: 100vh;
}
As per MDN documentation, with position set to fixed "The element is removed from the normal document flow, and no space is created for the element in the page layout.".
In order to fix your issue, you can give to .container-fluid-center a margin-left: 88px;, so that it will not "overlap" with .left-navbar
When you give position:fixed to the .left-navbar
A position:fixed element does not leave a gap in the page where it would normally have been located.
So You need to .fullPage .container-fluid-center give width like this
.fullPage .container-fluid-center {
width: calc(100% - 88px);
height: 100vh;
}
So it is worked as you need
I use Bootstrap 5 and I want to create a main div.container section which should include a fixed div element and an additional div element with scrollable content. If the page is scrolled the fixed div element should be fixed and the content div should be scrolled under the fixed div.
I don't want a fixed navbar (with class fixed-top) because there is no space on the left and right side. I want to have the fixed navbar in the div.container with space on the left and right side.
My solution works well, only the width of the fixed div is destroyed and the width is bigger than the width of the content div. See this Fiddle
How do I keep the default width untouched? Should I split the div.container section in two separate div sections?
HTML
<body>
<div class="container">
<div class="header">
<h1>Fixed Header</h1>
text...
</div>
<div class="content">
<h1>Begin of Content</h1>
very long text...
</div>
</div>
</body>
CSS
.header {
position: fixed;
z-index: 1000;
height: 200px;
background-color: green;
}
.content {
top: 200px;
position: relative;
background-color: yellow;
}
Thank you vor your help. Now I found a solution what works for me. The magic word is sticky:
.header {
position: sticky;
z-index: 1000;
top: 0px;
background-color: green;
}
.content {
background-color: yellow;
}
See here https://jsfiddle.net/3xzf8d65/
A solution to your problem may be to limit the width of the header using css, here's an example:
e.header {
position: fixed;
z-index: 1000;
height: 200px;
max-width: 85%;
background-color: green;
}
.content {
top: 200px;
position: relative;
background-color: yellow;
}
you can play around with the width percentage and even change it to px for example 'max-width: 1000px;'
This is my Three divs.
<div class="header">
<div>#ViewBag.Title</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
This is my CSS.
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.header
{
height: 10%;
width: 100%;
background-color: whitesmoke;
text-align: center;
}
.content
{
height: 80%;
width: 100%;
background-color: white;
}
.footer
{
height: 10%;
width: 100%;
background-color: whitesmoke;
}
</style>
Now I want that the child div inside my parent Header div will be flexible. Whenever i change my browser size the child div inside the parent header div will also get resized according to my browser size. And will stay inside the header div. Please help.
.header div
{
height: 100%;
width: 100%;
}
Use this for child div.
If set a child div's width is 50%. It filled in 50% of it's parent.
Do not set a height for the header element!
When dealing with responsive design, I try to avoid setting a height whenever possible. If you really need to set a height, do so on the child element, which then forces the header to have the height of its child.
use this in ur css
display-inline:block:
I've a html structure like:-
<body>
<div class="header">header</div>
<div class="content">
hello
</div>
<div class="footer">footer</div>
</body>
And the applied style on it are:-
<style>
body {
padding: 0px !important;
margin: 0px !important;
}
.header {
height: 30px;
background: gray;
}
.footer {
height: 30px;
background: green;
position: fixed;
bottom: 0px;
width: 100%;
}
.content{
background: yellow;
}
</style>
What I want is, the content div's height will be equal to the full height of the window except the header & footer part. Currently I'm just seeing a small yellow strip for the content part, as the text within it very minimal, the rest of the page is white. I want, the content div will occupy that place. I tried to use height : 100%; in the content div, but it didn't work. please help.
Try to modify your content class like:-
.content{
background: yellow;
position: fixed;
width: 100%;
top: 30px;
bottom: 30px;
}
The top and bottom is 30px as the height of header and footer is 30px. it'll work for you.
Try making a div class="wrapper" that surrounds your div class="content"... In the css give the .wrapper 100% width and height. I hope that helps.
I'm having an issue with a fluid sidebar and a content box next to it.
I designed my left #sidebar to my liking, but not I'm having trouble making a content box that fills up the remaining space next to it.
I'd like to have the whole project take up 100% of the page width. The problem is coming from the min/max widths on my sidebar.
Been goin' hard on this all day and still having problems, void space between, overlapping ,ect.
http://jsfiddle.net/DrDavidBowman01/PjLgE/
CSS
#container {
width: 100%;
display: block;
height: 100%;
}
#sidebar {
display: block;
width: 22%;
float:left;
min-width: 236px;
max-width: 332px;
height: 100%;
position: fixed;
border: 2px solid #0C6;
background-color: #000;
}
#content {
width: 88%;
height: 400px;
border: 6px solid #F00;
display: block;
color: #fff;
float: left;
position: relative;
max-width: calc(88% - 236px);
min-width: calc(88% - 332px);
}
HTML
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
It's a combination of two things. First, if you want to have divs take up 100% height, then you'll need to set the body and html to that as well.
html, body {
height: 100%;
}
Second, you have set the sidebar as position: fixed. This is just like having position: absolute set on it. If you want the sidebar to remain visible at all times, you can do a margin-left: 22%; (or whatever the width of the sidebar is) on #content. If you want the sidebar to flow with the rest of the page, just remove the fixed position.
This is because your sidebar is position: fixed. The best route would be to relatively position/float the sidebar at 100% height and position a fixed wrapper within it.
basic demo