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 ofposition: 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
Cross Browser Method to Fit a Child Div to Its Parent's Width
How to Create an H264 Video with an Alpha Channel for Use with HTML5 Canvas
Why Setting Absolutely Positioned Element's Sibling as Position:Relative, Brings It Above The Former
Post Values from a Multiple Select
iOS 7 - CSS - HTML Height - 100% = 692Px
Horizontal Line and Right Way to Code It in HTML, CSS
Mobile Safari 5Mb HTML5 Application Cache Limit
How to See Which Srcset Image a Browser Is Using with Browser Developer Tools
Apply Different CSS Stylesheet Depending on Browser Window Size - I Can't Find Anything Definitive
Jquery Autocomplete Where The Results Are Links