How to Reduce The Div Height

how to reduce the div height

You need to use max-height not min-height!

div{
max-height: 100px;
height: 100%;
}

Reduce height of a DIV from top

I figured the answer myself.

Just set the height to auto and set top the size you want to reduce.

.the-click { 
  position: absolute; 
  left: 0px; 
  right: 0px; 
  bottom: 0; 
  top: 100px; 
  width: 100%; 
  height: auto; 
  z-index: 999; 
  background-color: white; 
  opacity: 0.5;
 }

http://jsfiddle.net/Ym5w8/46/

Hope this helps someone else. :)

Reduce div height by a set amount

Use margin-top: -17vw instead of top: -17vw on line 54 of style.css

(You can also remove the position: relative as well.)

A negative margin-top removes space above, whereas top just moves the element.

how to reduce div size in CSS?

If you use Bootstrap, you had configurate before download it your GRID
It seems do be like a 12 Grid.

you used :

<div id="title" class="page-title green-bg col-xs-8">Local Adventures</div>

it should be :

<div id="title" class="page-title green-bg col-xs-4">Local Adventures</div>

you take 8 pieces from a 12 piece cake, so its larger. just take the half and you will get the same width you want for.

And please, if you use a mighty framework like bootstrap, dont overwrite its own classes with ids or something, its bad practise!

Reduce height from top and bottom of div (not just bottom)

div {  position: relative;}
div img {  position: absolute;  top: 50%;  transform: translatey(-50%);}

<p>What the image first looks like:</p><img src="https://upload.wikimedia.org/wikipedia/en/6/69/Stop_sign(standard).svg" width="140" height="150"><p>What the image looks like after removing some of it by putting it inside the div:</p><div style="overflow: hidden; padding: 0px; width: 140px; height: 120px;">  <img src="https://upload.wikimedia.org/wikipedia/en/6/69/Stop_sign(standard).svg" width="140" height="150"></div>
<p>But... I would like to remove some of the top of the stop sign also - not just the bottom!</p>

limit div height

The following seems to work just fine for me. See a demo here: http://jsbin.com/iqigen/5/edit

<style>
  #box {
    height: 500px;
    overflow: auto;
  }
</style>
<div id="box"></div>

When the collective height of the nested elements exceeds that of the parent, the parent will engage in overflowing. When the content overflows, a scrollbar will be shown on the parent element, obstructing any view of the child elements beyond the bounds of their container.

You can add several dynamic elements with the following:

var colors = [ '#F00', '#660', '#066' ];

setInterval( addElement, 1000 );

function addElement(){
  $("<p>", { text: new Date() })
    .css( 'background', colors[ Math.floor( Math.random() * colors.length ) ] )
    .appendTo( "#hello" );
}

How to adjust the width of a DIV per height using CSS

As you're using CSS3 you can make use of the vmin or vmax units. 1 vmin is equivalent to 1/100 the size of whichever is smallest out of height or width, whereas 1 vmax is equal to 1/100 the size of the larger value. If a user's screen had a resolution of 1000x800px, 100vmin would be equal to 800px and 100vmax would be equal to 1000px, as the height here is the smaller unit and the width is the larger unit.

In your case you can make use of it like this:

div {
    height: 65vmin;
    width: 100vmin;
}

Or:

div {
    height: 65vmax;
    width: 100vmax;
}

JSFiddle demo.

Note that you'll have to adjust these values yourself. 100vmin here will set the width to full size of the screen's height or width (whichever is smallest), and this may not be the desired effect.

There are a couple of browser issues with this approach, unfortunately. As they are new units, support is not perfect. Some browsers will not resize the container until the page is reloaded.

Expanding and Reducing The Height of a Div With One Button

i change your code!

jQuery:

$("#dasButton").click(function(){
    var inputValue=$("#dasButton").attr('value');

    if(inputValue=="Expand")
    {
        $("#div1").animate({height:"200px"});
        $("#dasButton").attr('value','Reduce');
    }
    else if(inputValue=="Reduce")
    {
        $("#div1").animate({height:"0px"});
        $("#dasButton").attr('value','Expand');
    }
});

HTML:

<input type="submit" class="toggle_div" id="dasButton" value="Expand"/><br>
<div id="div1">

---

Live Demo on JSFiddle

---

Related Topics