logo
down
shadow

height:auto not working properly, div doesn't expand with content


height:auto not working properly, div doesn't expand with content

By : Asma
Date : November 17 2020, 11:52 AM
I hope this helps . The moment you use position:absolute or position:fixed it will be cut out and placed on a new layer (if you would compare it with how photoshop works), therefore your browser does not "know" the dimensions anymore and will simply give it 0 height when positioning the other elements. Or as @Terry commented:
code :
position:absolute;
left:30px;
top: 60px;
margin-left:30px;
margin-top:60px;


Share : facebook icon twitter icon
CSS - Enable "auto expand" of absolutely positioned DIV when content extends beyond width/height parameters

CSS - Enable "auto expand" of absolutely positioned DIV when content extends beyond width/height parameters


By : user3296997
Date : March 29 2020, 07:55 AM
Any of those help You can use min-height and min-width to define the minimum values for those dimensions, which will be expanded to accommodate new/additional/larger content as necessary.
You can couple with the max-height and max-width attributes, which will allow the elements to move from the minimum, as necessary, to the maximum permitted value for the dimension.
code :
#content {
    position: absolute;
    min-height: 5em;
    max-height: 15em;
    min-width: 5em;
    max-width: 15em;
    border: 1px solid #f90;
    bottom: 0.5em;
    right: 0.5em;
    overflow: auto;
}
Auto expand the element height, if content is bigger in multiple elements css

Auto expand the element height, if content is bigger in multiple elements css


By : user3561670
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further http://jsfiddle.net/chricholson/UHrLH/10/
This will give you boxes inline but unfortunately the pairs will not extend to match the height of it's partner. To do this you will need to use tables or a javscript overwrite to capture the height. Also, bear in mind display: inline-block will not work on divs in IE7 and below, it would work on a span though: http://www.quirksmode.org/css/display.html#t03
Content height:auto not working

Content height:auto not working


By : Cherutha
Date : March 29 2020, 07:55 AM
around this issue Remove the height: 800px and add overflow: auto.
The problem is caused by the floating elements inside it.
code :
.content {
  width:930px;
  background: #eeeeee;
  background: -moz-linear-gradient(top,  #eeeeee 0%, #f4f4f4 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#f4f4f4));
  background: -webkit-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
  background: -o-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
  background: -ms-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
  background: linear-gradient(to bottom,  #eeeeee 0%,#f4f4f4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f4f4f4',GradientType=0 );
  border: 2px solid rgb(34, 178, 76);
  border: 2px solid rgba(34, 178, 76, .5);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* height: 800px; REMOVE */
  margin: 93px auto;
  margin-bottom: 10px !important;
  overflow: auto; /* ADD */
auto expand div height not working

auto expand div height not working


By : Malyar Farahee
Date : March 29 2020, 07:55 AM
To fix the issue you can do Check out this DEMO.
You need to check out the width/height ratio and adjust the padding-top with specific percentage value so the image shows nicely.
code :
<!--slide-part-starts--><div class="slide-part">
<!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="http://placehold.it/1150x350"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="http://placehold.it/1150x350"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->

<!--about-evio-starts--><div class="about-evio">
At EViO, we make tech gear that helps improve productivity,<br />
so that you have more time to do the essential things - living life to the fullest.
</div><!--about-evio-ends-->
.slide-part{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    min-height:100px;
    height:100%
}

.fadein {
    padding-top: 27%;
    position:relative; 
    width:100%; 
    max-width:1600px; 
    margin:0 auto; 
    min-height:100px;
    height:100%
}

.fadein img {
    position:absolute; 
    left:0; 
    top:0; 
    bottom:0;
    right:0;
    height:100%;
    width:100%; 
}

.about-evio{
    width:100%;
    text-align:center;
    padding:50px 0 50px 0;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    text-align:center;
    min-height:20px;
    background:#fff;
    font-size:1.2em;
    line-height:30px
}
Div's height doesnt expand

Div's height doesnt expand


By : Seungbum Park
Date : March 29 2020, 07:55 AM
Hope that helps I have been dealing with some problem about the divs height. It simply doesnt expand even thought theres a content. Let me first show you the problem on the screenshots: , I am not sure this is what you want or not. But,
code :
position of `#mytextbox` div is absolute so container will never get its height.  
.container {
    display: flex;
    flex-flow: row wrap;
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
    padding-left: 0;
    padding-right: 0;
}

#menu2 {
    position: relative;
    padding: 5% 0;
}

.mybox {
        padding-top: 3%;
        padding-bottom: 3%;
        width: 30%;
        font-size: 1.5em;
}

#mytextbox {
        top: 30%;
        z-index: 2;
        order: 3;
        border: 1px solid black;
        background: 
            linear-gradient(
                rgba(255, 255, 255, 1), 
                rgba(255, 255, 255, 0.7)
                ),
                url('./../images/Pattern.png') bottom no-repeat;
} 

#box1 {
        position: absolute;
        top: 5%;
        order: 1;
        background-color: rgb(66,142,158);
        margin-right: 25%;
        margin-left: -28%;
}

#box2 {
        position: absolute;
        order: 2;
        background-color: rgb(196,52,52);
        margin-left: 30%;
        right: -28%;
        top: 5%;
}
#box3 {
        position: absolute;
        order: 4;
        background-color: rgb(223,187,66);
        margin-right: 30%;
        margin-left: -28%;
        bottom: 5%;

    }
#box4 {
        position: absolute;
        order: 5;
        background-color: rgb(80,139,97);
        margin-left: 30%;
        right: -28%;
        bottom: 5%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="menu2" class="container">
        <div id="mytextbox" class="col-sm-12 col-xs-12">

            <h2 id="h2Box1" style="visibility: visible">Text from the box1</h2>
            <h2 id="h2Box2" style="visibility: hidden">Text from the box2</h2>
            <h2 id="h2Box3" style="visibility: hidden">Text from the box3</h2>
            <h2 id="h2Box4" style="visibility: hidden">Text from the box4</h2>

            <p id="pBox1" style="visibility: visible">Paragraph from the box1</p>
            <p id="pBox2" style="visibility: hidden">Paragraph from the box2</p>
            <p id="pBox3" style="visibility: hidden">Paragraph from the box3</p>
            <p id="pBox4" style="visibility: hidden">Paragraph from the box4</p>

        </div>
        <div id="box1" class="col-sm-6 col-xs-3 mybox active-box">
            <span class="hidden-xs">BOX NAME 1</span>
            <span class="visible-xs">1</span>
        </div>

        <div id="box2" class="col-sm-6 col-xs-3 mybox">
            <span class="hidden-xs">BOX NAME 2</span>
            <span class="visible-xs">2</span>
        </div>
        <div id="box3" class="col-sm-6 col-xs-3 mybox">
            <span class="hidden-xs">BOX NAME 3</span>
            <span class="visible-xs">3</span>
        </div>
        <div id="box4" class="col-sm-6 col-xs-3 mybox">
            <span class="hidden-xs">BOX NAME 4</span>
            <span class="visible-xs">4</span>
        </div>
    </div>
Related Posts Related Posts :
  • CSS Media Queries not kicking in when there supposed to
  • Video JS - poster image cover/contain
  • center the div absolute using css but i cannot figure out why its not moving to centre
  • simple css code, i dont understand
  • Autoformatting LESS code with vim
  • Can we use different CSS language/pre processors for different components in a Angular Project
  • combined multiple classes into one css rule
  • Detect mobile device browsers, not only screen width
  • CSS folded corners of div with shadow
  • bootstrap 3: why do my <div>s stack from 992 px width onwards when using "col-sm-6"
  • IE7, IE8 support for css3 media query
  • Gradient ends are blurry when using pixel measurements
  • display bootstrap popovers outside divs with overflow:hidden
  • How to make a non responsive site by using Bootstrap?
  • Selecting an element that doesn't have a child with a certain class
  • Embedded Twitter Widget Height issue
  • Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices
  • How can I add a vertical scrollbar to my div automatically?
  • Trouble changing the link font color using typography.js in gatsby
  • Nesting up scss with main.scss and subcomponent scss files
  • Why does my FontSquirrel font not work?
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • increase size of search terms in a magento site by applying css class-name
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org