• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Höhe automatisch anpassen?

N

NielsHenn

Neues Mitglied
Hallo,
ich habe mein Twitter Profil in meine Html Seite eingebettet und möchte, das sich die unterste Kannte immer mit bewegt, je nachdem, wie man grade den Tab skaliert. Ich denke mir fehlt ein simpler CSS Code, ich würde mich freuen, wenn mir jemand weiter helfen könnte :).

Danke schon mal im Voraus!

unskaliert.PNG skaliert.PNG
 
Neben den Screenshots den Code zu posten, wäre schon aufschlußreicher.

Ich hab da ja eine Vermutung, möchte mich aber nicht zu weit aus dem Fenster lehnen :p
 
@Spicelab

HTML: 
      <script type="text/javascript">
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    </script>

<head>
...
</head>

<body>
...
        <a class="twitter-timeline" href="https://twitter.com/PNDRMY" width="250px" height="738px" data-widget-id="694253336430780416"></a></div>

...
</body>
 
Die Höhe für <a> wird durch seinen Elementinhalt bestimmt. Da lässt sich nichts der Viewport-Größe automatisch anpassen.

Die Attribute width und height sind übrigens für <a> nicht gültig. Und eine Angabe zur Einheit (px) auch nicht. Die gilt automatisch, wenn darin kein relativer %-Wert angegeben wird.
 
das verstehe ich nur besteht die eingbundene Twittertimeline aus einer Funktion, die oben steht und dem <a> Teil. Wie kann ich denn jetzt den Inhalt von <a> so verändern, das es gut angezeigt wird ;)
 
Vlt so?!
Code: 
<!Doctype Html>
<html>

<head>
<meta charset="utf-8">
<title>display:inline-block geht auch</title>

<style>

body , html {
height:100%;
}

#col2 {
margin-left:20%;
background:#ada;
}

#col2:after {
content:"";
display:block;
clear:both;
}
#col1 {
float:left;
width:20%;
background:#dad;
min-height:100%;
position:relative;
}

#col1 a {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:#aaa;
}
</style>
</head>
<body>
<div id="col1">
<a class="twitter-timeline" href="https://twitter.com/PNDRMY"  data-widget-id="694253336430780416"></a>
</div>
<div id="col2">
links
</div>
</body>
</html>

Oder besser mit FlexBox.
 
Zuletzt bearbeitet:
djheke schrieb:
Vlt so?!
Code: 
<!Doctype Html>
<html>

<head>
<meta charset="utf-8">
<title>display:inline-block geht auch</title>

<style>

body , html {
height:100%;
}

#col2 {
margin-left:20%;
background:#ada;
}

#col2:after {
content:"";
display:block;
clear:both;
}
#col1 {
float:left;
width:20%;
background:#dad;
min-height:100%;
position:relative;
}

#col1 a {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:#aaa;
}
</style>
</head>
<body>
<div id="col1">
<a class="twitter-timeline" href="https://twitter.com/PNDRMY"  data-widget-id="694253336430780416"></a>
</div>
<div id="col2">
links
</div>
</body>
</html>
Zum Vergrößern anklicken....
Bleibt dabei, dass sich die Höhe von <a> nicht dem Viewport anpasst. Bei geringerer Fensterhöhe muß weiterhin darin vertikal gescrollt werden, um den Rest einzusehen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben