Da fällt mir direkt nur abschätzen und Textlänge anpassen ein, es sei denn du willst den Text knallhart abschneiden, dann overflow-y: hidden;.
Du gibst der Sidebar eine feste Höhe und alles was darüber hinaus geht an Text wird einfach versteckt.
Das kannst du mit offsetHeight (inklusive Innenabstand und Rahmen!)
Beispiel:
<div
style="height: 217px; padding: 7px; border: 3px ...;"
onclick="alert(this.offsetHeight()+'px');"
>
Inhalt
</div>Dir wird 237px ausgegeben, das ergibt sich wie folgt:
217 (Höhe des Elements)
+ 2 x 3 (Breite des Rahmens, dieser kommt oben und unten vor)
+ 2 x 7(Innenabstand, auch oben und unten)
perfekt 
danke
Das Ganze funktioniert meines Wissens nach sogar wenn du für den div überhaupt keine Höhe geschweige denn Rahmen / etc. angibst, sehr praktisch also.
jo, das hört sich gut an
Hallo.
Auch wenn das Thema hier alt ist, würde ich gerne meine Frage hier rein posten.
Folgendes will ich umsetzen.
Ich habe auf meiner Website am linken Rand ein Inhaltselement, welches nur eine Überschrift, ein Bild und zwei Beschreibungen hat (descrOne, descrTwo).
Für das schicke aussehen will ich Canvas Elemente nutzen. Diese sollen abhängig von der Größe des Inhaltselement gezeichnet werden (Berechung im Code).
Die Berechnung hängt unter anderem von der Höhe des Inhaltelements ab. Mit folgendem Code will ich für jedes vorhandene Sidebar-Element (das oben erwähnte Inhaltselement) das Canvas berechnen:
function draw() {
var canvas = document.getElementsByClassName("iof_sb_canvas");
var boxen = document.getElementsByClassName("iof_sidebar");
var korrektur = document.getElementsByClassName("tx-dce-pi1");
var caption = document.getElementsByClassName("iof_sb_caption");
var image = document.getElementsByClassName("iof_sb_image");
var desOne = document.getElementsByClassName("iof_sb_descrOne");
var desTwo = document.getElementsByClassName("iof_sb_descrTwo");
for (var i = 0; i < canvas.length; i++)
{ if(canvas[i].getContext)
{ var ctx = canvas[i].getContext("2d");
var summe = caption[i].offsetHeight + image[i].offsetHeight + desOne[i].offsetHeight + desTwo[i].offsetHeight;
//var hoehe = boxen[i].offsetHeight;
var hoehe = summe;
var breite = boxen[i].offsetWidth;
var padding = boxen[i].style.padding;
var bottom = hoehe - padding;
var angle = 5;
var radius = 360 / angle;
var a = breite;
var c = a / (Math.cos(Math.PI * 2 / radius));
var b = Math.floor(Math.sqrt(Math.pow(c, 2) - Math.pow(a, 2)));
var bot = bottom - b;
canvas[i].style.width = breite + "px";
canvas[i].style.height = hoehe +"px";
ctx.beginPath();
ctx.fillStyle = "#dddfde";
ctx.moveTo(0, 0);
ctx.lineTo(a, b);
ctx.lineTo(a, bot);
ctx.lineTo(0, bottom);
ctx.fill();
canvas[i].style.top = "-" + hoehe + "px";
korrektur[i].style.height = hoehe + "px";
boxen[i].style.height = hoehe + "px";
}
}
}Beim ersten klappt es super.
Bei der Sidebar darunter allerdings nicht mehr.
Ich glaube es liegt daran das er die Imagehöhe beim zweiten nicht auslesen kann.
Kann mir da noch einer Helfen?
Danke bereits im vorraus.
Grüße
Axe
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!