I have a wrapper div which is positioned absolute. Is it possible to extend the height of the wrapper div to accommodate the content and show the background color. Below the code I used:
CSS
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
}
body {
font-family: Arial,sans-serif;
font-size: 2em;
line-height: 1.5em;
}
#contentbody {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
background-color: Green;
}
HTML
<div id="contentbody">
<div id="content">
<div style="height: 1500px;">some large content</div>
</div>
</div>
I don't think you should set bottom in #contentbody. By setting both top and bottom you are forcing the height of the div to be the height of the browser view-port minus 10 (top + bottom).
Add the overflow:hidden to your html,body selector and and overflow:auto to your #contentbody div:
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
overflow:hidden; /* overflow is hidden */
}
body {
font-family: Arial,sans-serif;
font-size: 2em;
line-height: 1.5em;
}
#contentbody {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
background-color: Green;
overflow: auto; /* overflow is auto to allow scrolling */
}
try using style = "overflow: scroll" on your DIV
EDITED: to remoe overflow: auto
Related
I have a body containing two div's one is an absolutely positioned div and another one is a static default positioned div, i want the absolutely positioned div to take the full height of the screen which it takes but the problem that next arises is when i try to apply margin top to the statically positioned div, it also gets added to the absolutely positioned div.
How can I make the absolutely positioned div not get the margin of the sibling div ?
body {
font-family: sans-serif;
margin: 0;
padding: 0;
position: relative;
}
.div-1 {
position: absolute;
border: 2px solid red;
width: 90%;
left: 0;
right: 0;
margin: 0 auto;
height: 100vh;
}
.div-2 {
height: 200px;
width: 90%;
background-color: blueviolet;
margin-top: 8rem;
}
<div class="div-1"></div>
<div class="div-2"></div>
The issue is that you have margin collapse on the body element. Margin collapse happens when there's no content separating parent and descendants elements (such as the body and .div-2). You can easily fix this by setting the display property of the body element to flow-root.
body {
font-family: sans-serif;
margin: 0;
padding: 0;
position: relative;
/* Set flow-root */
display: flow-root;
}
.div-1 {
position: absolute;
border: 2px solid red;
width: 90%;
left: 0;
right: 0;
margin: 0 auto;
height: 100vh;
}
.div-2 {
height: 200px;
width: 90%;
background-color: blueviolet;
margin-top: 8rem;
}
<div class="div-1"></div>
<div class="div-2"></div>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
position: relative;
}
.div-1 {
position: absolute;
border: 2px solid red;
width: 90%;
left: 0;
right: 0;
margin: 0 auto;
height: 100vh;
z-index:1;
}
.div-2 {
height: 200px;
width: 90%;
background-color: blueviolet;
top: 8rem;
position: inherit;
}
Use top and position inherit instead of margin-top, check if it can be use.
If using the relative positioning keeps my content box within the body container, why does the box I am using overlap the body tag's borders?
This is the html:
<body>
<div class="content">
<img src=""/>
</div>
</body>
This is the css for my body tag:
body {
font-family: Calibri;
background-color: #e7e6e8;
width: 100%;
min-height:100%;
min-width: 1200px;
margin: 0;
padding: 0;
border: solid black 5px;
}
This here is the trouble maker:
.content {
position: relative;
width: 1325px;
height: 300px;
overflow: hidden;
top: 45px;
left: 7%;
border: solid black 2px;}
You can use margin-top: 45px; instead of top: 45px;. (Also margin-left: 7%; if you want to stop the overflow there as well.)
If you relatively position an element, it's always doing so after setting the height/width of it's parent. More in this answer.
Take a look at this fiddle: https://jsfiddle.net/hkbynkmf/1/
How do I let the green border flow around all the divs, with no div "overflowing" the border? The upper div is OK, but the lower one is not.
Also, I need some distance between the divs;
I know that padding and margin is transparent, so I chose (a green) border to illustrate my point. In the end, the clearance should be transparent.
HTML:
body {
position: relative;
background-color: #ff0000;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 0px;
border: 10px solid #190;
margin: 0px;
}
#header {
position: relative;
margin:0 auto; /* div will be H-centered */
top: 10px;
left: 0px;
bottom: 0px;
right: 0px;
width: 960px;
height: 250px;
background-color: #DDDDDD;
overflow: hidden; /* Keep all sub-elements inside this div */
}
#intro {
position: relative;
margin:0 auto; /* div will be H-centered */
top: 15px;
left: 0;
bottom: 0px;
right: 0px;
width: 960px;
height: 150px;
background-color: blue;
overflow: hidden; /* Keep all sub-elements inside this div */
}
<body> <!--position: relative;-->
<div id="header"> <!--position: relative;-->
</div>
<div id="intro"> <!--position: relative;-->
</div>
</body>
You're using the top attribute to move your intro div 15px down, below the header. This is causing the 15px overlap with the container. When positioning items this way you should consider using margin to apply the change, rather than the positioning attributes of top, right, bottom or left.
You have a lot going on with your CSS which is making the stylesheet much more complicated than it needs to be. I have simplified your CSS as follows to achieve the same effect:
body {
background-color: #ff0000;
border: 10px solid #190;
margin: 0px;
padding: 0px;
}
a img {
border:none;
}
#header {
background-color: #DDDDDD;
height: 250px;
margin:0 auto;
overflow: hidden;
width: 300px;
}
#intro {
background-color: blue;
height: 150px;
margin:15px auto 0;
overflow: hidden;
width: 300px;
}
See updated fiddle
In your code, the #intro is positioned 15px below the #header. Doing so leaves no place for the div in body.
Not sure what you are trying to achieve here with position: relative; but the #intro can be written like
#intro
{
margin:10px auto;/* div will be H-centered */
width: 300px;
height: 150px;
background-color: blue;
overflow: hidden;/* Keep all sub-elements inside this div */
}
Using the margin top property on the #intro div will allow the green border to flow, while also having the space in between the divs. Here is the fiddle:
https://jsfiddle.net/hkbynkmf/17/
#intro
{
position: relative;
margin:15px auto 0px auto /* div will be H-centered */
left: 0;
bottom: 0px;
right: 0px;
width: 300px;
height: 150px;
background-color: blue;
overflow: hidden; /* Keep all sub-elements inside this div */
}
I have a problem with the container-about div.
Its height is 100% because I want div occupies the entire width and height after header div.
The problem is that now I do not scroll to show the full text.
We would also like the ability to display text with scroll for tablet and smartphone.
Thanks for Your help.
<div class='header'>
<div class='header-container'>
</div>
</div>
<div class='container-wrapper'>
<div class='container-about'>
<div class='about-text'>
text comes here.....
........
</div>
</div>
</div>
link: http://ttest11234.librax.net/index.html
css:
* {
margin: 0 auto;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
font-size: 12px;
line-height: 1.5;
background: #000;
font-weight: 400;
}
.header {
top: 0px;
left: 0px;
width: 100%;
height: 100px;
position: fixed;
background: gray;
opacity: 0.8;
}
.header-container {
width: auto;
height: 100px;
margin: 0 10% 0 10%;
text-align: center;
}
.container-wrapper {
width: 100%;
height: 100%;
}
.container-about {
margin: 100px auto;
padding-bottom: 2%;
width: 100%;
height: 100%;
background: #FFF;
position: relative;
}
.container-about h3 {
padding: 0 10% 5% 10%;
font-family: 'Verdana', sans-serif;
font-size: 12px;
line-height: 150%;
font-weight: 400;
}
add overflow: scroll property in container-about class and container-wrapper class of div
.container-about {
background: none repeat scroll 0 0 #FFFFFF;
height: 100%;
margin: 100px auto;
overflow: scroll;
padding-bottom: 2%;
position: relative;
width: 100%;
}
The solution is simply to add overflow: auto to .container-wrapper. That gives you the desired scrollbar.
But now your problem is that the div is too high (it's 100% body height + 100 pixels). Give it a 100px top padding and position the header absolutely.
You should not use a fixed top margin for .contain-about, since you are going to use them on mobile devices as that would take a lot more space then desktops. Instead, you could use % or em.
set overflow-x to auto or scroll for .about-text to get your scroll bar.
I am trying to implement cosntruction, described here.
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
border: solid 1px blue;
height: 90%;
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
}
The whole page has background color (gray), header and footer are transparent (so you can see the page's background through it) and the content block has red background. Despite the fact that content part is stretchable it doesn't fill with the background the whole block, only the actual.
Is it possible to fill the whole content block with the color?
While minimizing window the footer floats on content. is it possible to disable such behaviour?
Here is a workaround of what you are looking for. Hope this helps.
Add this lines of code below to your code:
#main{
position: absolute;
top: 33px;
bottom: 33px;
left: 0;
right: 0;
}
#wrap{
position: relative;
}