I want to adjust the height of div content automatically without setting fixed height of main div, but I'm not sure how. I tried with height:100% and height: auto
This is my code:
.tmr_box {
height: 470px;
}
.tmr_inner {
position: fixed;
width: 100%;
max-height: 440px;
overflow-x: hidden;
white-space: nowrap;
height: auto;
overflow-y: auto;
max-width: calc(40% + 110px);
}
<form>
<div class="row" style="margin-top: 10px;">
<div class="col-md-6 tmr_box" ng-if="vm.tmr">
.....
</div>
<div class="col-md-6 tmr_box" ng-if="vm.tmr">
<table>
...
</table>
</div>
</div>
</form>
Without fixed height property, it looks like this.
enter image description here
Thanks in advance for your help
I think the problem comes from the position:fixed of the div's content (.tmr_inner). Because of it the parent div render without paying so much attention to him. You should try to remove this property or add it to the parent (tmr_box) instead.
Related
I want to make it so that one div can scroll horizontally independently of the other div. Scrolling divs should have a minimum width (e.g. 500px) and not be aligned to the width of the content. The other div has a width of 100%. How can i do this?
<div>
<div #parent style="width: 100%"></div>
<div #child style="position: relative; width: 100%">
<div #child class="child-container"></div>
</div>
</div>
Here is my css:
.child-container {
position: absolute;
overflow: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 500px;
}
I edited the post to be more realistic
What you're looking for is the CSS property overflow-x which will allow you to specify the overflow behavior with CSS.
Here is MDN's documentation on this property.
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
Update
Here is a working example of what you are asking for. If I'm not understanding your question, please let me know.
.padding {
padding:25px;
}
.container {
max-width:400px;
}
.child-container {
background:#dedede;
overflow-x:scroll
}
.child-item {
min-width: 500px;
}
<div class="container padding" style="background:#ededed;">
<div class="padding">
<h1>Parent</h1>
</div>
<div class="child-container padding">
<div class="child-item">
<h1>Hello world</h1>
</div>
</div>
</div>
I have an img in a container. I have given the image width: 100% and now I want to set a max-height for the image without resizing it.
I tried adding max-height: 120px; overflow: hidden; but it is not working.
Why can't I crop the image to be 100% width and 120px height from top?
Demo:
https://jsfiddle.net/DTcHh/14727/
HTML:
<div class="row">
<div class="col-xs-6">
<img src="http://www.tuning-links.com/uploads/image/2009/June/VW%20Scirocco%20Remis/VW_Scirocco_Remis_4.jpg" alt="">
</div>
<div class="col-xs-6">
<img src="http://www.tuning-links.com/uploads/image/2009/June/VW%20Scirocco%20Remis/VW_Scirocco_Remis_4.jpg" alt="">
</div>
</div>
CSS:
img{
width:100%;
max-height:120px;
overflow:hidden;
}
You will need to wrap the image in a div. Use the same css on a div and it should work.
Well, if you set the max-height to 120px it's not going to go over that, which is why the image is resizing. I'm not too sure what you're looking for here?
This may help you out: https://jsfiddle.net/uxp1cbto/
img
{
width: 100%;
max-height: 100%;
max-width: 100%;
overflow: hidden;
}
Here is a jsfiddle where you can see cells expanding outside of their container(or extending the size of a table when this happens with tables) because:
of a long word even if "word-wrap: break-word" is set
of a large div even if "overflow: hidden" is set
http://jsfiddle.net/NUHTk/166/
<div class="container">
<div class="leftBlock">
Too-much-text-ъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъ
</div>
<div class="rightBlock">
Right block content
</div>
</div>
<div class="container">
<div class="leftBlock">
<div style="width: 1200px; height: 200px;">
Huge element
</div>
</div>
<div class="rightBlock">
Right block content
</div>
</div>
CSS
.container
{
width: 500px;
padding: 10px;
margin: 20px auto;
background: rgb(255,240,240);
}
.leftBlock, .rightBlock
{
display: table-cell;
vertical-align: top;
}
.leftBlock
{
width: 100%;
//max-width: 0;
word-wrap: break-word;
overflow: hidden;
background: rgb(240,255,255);
}
.rightBlock
{
width: 200px;
max-width: 200px;
min-width: 200px;
background: rgb(200,200,200);
}
This issue can be fixed by adding a "max-width: 0" to .leftBlock, result of which can be seen here:
http://jsfiddle.net/CyberAP/NUHTk/103/
This same problem and fix can occur when dealing with tables.
This feels like a hack. My questions are:
why does max-width: 0 solve the problem.
Why and how does it change the behavior of the cell sizing.
I guess, why isn't this the default behavior?
You can add display:table; and table-layout:fixed to container class. Hope this is solve your issue.
My wrapper div is not expanding in height by it's content. On the other hand, it expands by the header div on the page, and the nav div, but not by the sidebar which lies inside another div. Here is the HTML:
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
nav content goes here
</div>
<div id="pagecontent">
<div id="sidebar">
some sidebar stuff like login form
</div>
</div>
</div>
and the CSS (only the necessary css, not like webkit box shadows):
#wrapper {
width: 900px;
margin: 0 auto;
padding-bottom: 80px;
}
#header {
height: 160px;
width: 100%;
}
#nav {
width: 100%;
height: 40px;
}
#sidebar {
float: right;
width: 140px;
height: 100%;
}
#pagecontent {
width: 900px;
}
the sidebar, which has height 100%, goes outside the wrapper div, you could look at it on http://craftersinn.net
You've missed to add css rule overflow:hidden in #wrapper css.
Add overflow: hidden; to your wrapped CSS, also make sure your selectors are actually selecting elements:
<div id="pagecontent">// remove page
#content {
http://jsfiddle.net/Kyle_Sevenoaks/bPT49/
Add <div style="clear: both;"></div> after
<div id="sidebar">
some sidebar stuff like login form
</div>
You should read this article on floats, especially the section "Clearing the Float".
In short, you can use clear: both, overflow: hidden or the clearfix method. Good luck!
Here discussed the same problem. Check for clearing floats solution and explanation about overflow: hidden;
css box model does not stretch using padding
I'm new as webdesigner and I have to create a portion of a page that has 3 columns: a menu on the left side, the central body and a vertical banner. I can't use tables, so I've created a similar HTML:
<div class="Body">
<div class="LeftMenu">My menu</div>
<div class="Content">Foo body</div>
<div class="VerticalBanner">My menu</div>
</div>
While the CSS:
.LeftMenu {
width: 20%;
}
.Content {
margin: auto;
left: 20%;
position: absolute;
top: 0px;
width: 60%;
}
.VerticalBanner {
left: 80%;
margin: auto;
position: absolute;
top: 0%;
width: 20%;
}
So, my problem using that code is that the parent div (Body) takes the height of the first div (LeftMenu), which is not the bigger. This causes the content of "Content" and "VerticalBanner" to flow out "Body" and to go under the Footer div. If I use the float attribute, the "Body" div collapse without dimensions and then the footer div slides under the three columns inside "Body".
I also tried with display attribute, but Internet Explorer doesn't support this and some columns have strange behaviour.
What is the correct way to do this?
I think you should use floats for your DIVs. It's much easier after that to move them around.
Use display: table-*:
.Body { display: table; }
.Left, .Content, .VerticalBanner { display: table-cell; }
See e.g. this JSfiddle.
To stop the body div from collapsing you can use
.body{ overflow: hidden; }
I'm don't think you need position absolute.
<div class="Body">
<div style="width:20%;float:left;">My menu</div>
<div style="width:60%;float:left;">Foo body</div>
<div style="width:20%;float:left;">My menu</div>
<div style="height:1px;font-size:1px;clear:both;"> </div>
</div>