Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Give a div a height that is a multiple of a number?

Tags:

html

css

tile

A div has a tilable background. The height of this div will depend on its content. I need the div to stretch by a multiple of the background image's size.

For instance, the background is a 64x64 image. So, if the div's height is to increase, I want to do so by steps of 64px.

Is this possible with CSS? I've not found leads using google. Thanks for your time!

like image 545
Jem Avatar asked Feb 10 '12 13:02

Jem


People also ask

How do you give a Div 100 height?

Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.

How do you make the height of two divs equal?

The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.


1 Answers

To my knowledge this cannot be done in CSS, but you could probably solve it with some javascript. If you have access to jQuery:

$(function() {
    $div = $('#the_div_id');
    var remainder = $div.height() % 64;
    var newHeight = $div.height() + (64-remainder);
    $div.css('height', newHeight);
});
like image 166
Christoffer Avatar answered Oct 06 '22 00:10

Christoffer