Is It Really Impossible to Make a Div Fit Its Size to Its Content

Is it really impossible to make a div fit its size to its content?

CSS display setting

It is of course possible - JSFiddle proof of concept where you
can see all three possible solutions:

  • display: inline-block - this is the one you're not aware of

  • position: absolute

  • float: left/right

How to fit the height of a div to its contents? Other answers did not resolve it

change you css code like below:

.div {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding:5px;
}

.logo {
}

see the demo here ---->http://jsfiddle.net/4A7Q9/1/

how much content can fit in a div of certain height and width

I agree with commenters on your question that usually there are better ways and such an idea is going to work slow and certainly not everywhere (JavaScript for layout is often a signal of problems in the page's architecture).

However, there is a solution for this.

You will need to measure how many words fit in 100x100 box and slice the content in appropriate way. For this, you may use an invisible div with width: 100px but height: auto and add content there until its offsetHeight becomes greater than 100. Since you probably use a normal font and not a monospaced one, the measurement will need to take place for every box. In the following example, we will slice lorem ipsum text to fit into as many 100x100 boxes as needed. It is not quite optimized and you may need further work on it to suite your purposes.

var loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
var boxParent = document.getElementById('parent');
while (loremIpsum.length > 0) { var boxContent = document.createElement('div'); boxContent.className = 'content __measuring'; boxParent.appendChild(boxContent);
var indexOfSpace = loremIpsum.indexOf(' '); var lastIndexOfSpace = indexOfSpace; while (indexOfSpace != -1 && boxContent.offsetHeight < 100) { boxContent.innerHTML = loremIpsum.substring(0, indexOfSpace); lastIndexOfSpace = indexOfSpace; indexOfSpace = loremIpsum.indexOf(' ', indexOfSpace + 1); } if (indexOfSpace == -1) { boxContent.innerHTML = loremIpsum; loremIpsum = ''; } else { loremIpsum = loremIpsum.substring(lastIndexOfSpace + 1); }
boxContent.className = 'content';}
#parent .content {  display: inline-block;  width: 100px;  height: 100px;  padding: 8px;  margin: 8px;  background: yellow;  font-family: Arial, sans-serif;  font-size: 16px;  box-sizing: border-box;  vertical-align: top;  }
#parent .content.__measuring { height: auto; }
<div id="parent"></div>

Can I set an element's size to fit its potential content, rather than its actual content?

I would consider data attribute to add both texts using pseudo elements then control the opacity to hide/show them:

div {  text-align: right;}
#del { display: inline-block; position: relative}
#del:before { content: attr(data-text); position:absolute; left:0; right:0; top:1px; /*there is 1px default padding */ text-align:center;}
#del:after { content: attr(data-alt); opacity:0;}

#del:hover::before { opacity:0;}#del:hover::after { opacity:1;}
<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>

How to fit the height of a div to its contents? Other answers did not resolve it

change you css code like below:

.div {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding:5px;
}

.logo {
}

see the demo here ---->http://jsfiddle.net/4A7Q9/1/

make div's height expand with its content

You need to force a clear:both before the #main_content div is closed. I would probably move the <br class="clear" />; into the #main_content div and set the CSS to be:

.clear { clear: both; }

Update: This question still gets a fair amount of traffic, so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox:

body {  margin: 0;}
.flex-container { display: flex; flex-direction: column; min-height: 100vh;}
header { background-color: #3F51B5; color: #fff;}
section.content { flex: 1;}
footer { background-color: #FFC107; color: #333;}
<div class="flex-container">  <header>    <h1>     Header       </h1>  </header>
<section class="content"> Content </section>
<footer> <h4> Footer </h4> </footer></div>

Maximum possible size image and div expanding to fill the space

I've edited the code your solution is this what you want ? I'm not sure..

https://jsfiddle.net/vjLps7qs/6/

It becomes :

  .container {
width: calc(100vw);
height: 100vh;
overflow: hidden;
}

.top {
height: 1.25em;
padding: 3px;
background: yellow;
display: flex;
flex-direction: row;
}

.innerCtr {
height: 100%;
overflow: hidden;
}

.left {
height: 100%;
background: red;
overflow: hidden;
}

.right {
max-height: 100%;
max-width: 80%;
calc(100% - 1.25rem);
background: blue;
float: right;
object-fit: contain;
overflow: hidden;
position: relative;
top: calc(50% - 1.25rem);
transform: translateY(-52%) scale(0.95);
}

added calc, which is supported by all major browsers

  .right {
calc(100% - 1.25rem);
top: calc(50% - 1.25rem);
}

Again, I'm very sorry if that wasn't what you were looking for but this thread is hard to navigate.

How to make a div fill a remaining horizontal space?

This seems to accomplish what you're going for.

#left {  float:left;  width:180px;  background-color:#ff0000;}#right {  width: 100%;  background-color:#00FF00;}
<div>  <div id="left">    left  </div>  <div id="right">    right  </div></div>


Related Topics



Leave a reply



Submit