CSS für <p> </p> eine Scrollbar?

Ich habe ein <p> Tag wo am ende meines Scripts durch die ID ein sehr großer Inhalt rein kommt und dafür bräuchte ich jetzt eine Scroll leiste. Aber wie mache ich das?

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

DatLicht

24.01.2023, 14:46

Die Eigenschaft, nach der du suchst, ist overflow.

Die kannst du auch nach overflow-x und overflow-y trennen, je nach dem wo du das Scrolling willst.

Willst du immer eine vertikale Scrollbar anzeigen lassen, würde ich

overflow-y: scroll;

verwenden.

Woher ich das weiß:Berufserfahrung – arbeite seit Jahren in der Softwareentwicklung

Lenzer66u

Beitragsersteller

24.01.2023, 14:47

ok habs hinbekommen wie schaffe ich jetzt das immer das letzte also unten angezeigt wird?

DodgeRT

24.01.2023, 14:45

ne scrollbar entsteht wenn der inhalt größer als des fenster ist. festlegen kannst die größe normal über height und wie der inhalt dargestellt wird über "overflow". overflow:scroll sagt z.b. dass der rest gescrollt werden kann. mit overflow:auto wird festgelegt, dass eine scrollbar nur erscheint, wenn der text über die höhe hinausgeht

https://www.w3schools.com/css/css_overflow.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow?retiredLocale=de

Lenzer66u

Beitragsersteller

24.01.2023, 14:46

ok habs hinbekommen wie schaffe ich jetzt das immer das letzte also unten angezeigt wird?

Zwnow

24.01.2023, 16:02

@Lenzer66u

Guckste hier

FrageCoding

25.01.2023, 11:54

@Lenzer66u

Meinst du den Footer? Kannst du mit Flex Grow arbeiten. Kannst mir auch eine FA schicken.

Ähnliche Beiträge

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zum Beitrag

Border-Radius in Tabellen ohne CSS?

Hi zusammen,

die Frage ist mir zwar etwas peinlich, aber ich bekomme es nicht gelöst und brauche mal eure Hilfe.

Weiß jemand wir man die Ecken einer Tabelle abgerundet bekommt, ohne dafür css zu verwenden?

Ich habe nämlich folgendes Problem:

Ich versuche, ein neues Email-Template zu bauen. Leider werden je nach E-Mailprogramm einige CSS Befehle nicht erkannt (Outlook). Da ich nicht mit Bildern arbeiten möchte, suche ich hierzu eine „reine HTML-Lösung“.

oder:

Wenn jemand, weiß wie man Outlook dazu bringen kann auf Border-Radius (css) zu reagieren, nehme ich auch gerne jeden anderen Vorschlag an ^^

Lieben Dank schon mal 😊

<table class="emailTable">
    <tr class="firstTR">
        <td>1</td>
        <td>2</td>
     </tr>
</table>

...zum Beitrag

HTML Seitliches scrollen verbieten?

Hallo, ich möchte gerne bei meiner Website das seitliche scrollen verhindern. Mein Inhalt befindet sich in der mitte. In css habe ich nun overflow-x: hidden. Nun kann man nicht mehr per Scrollbar nach rechts scrollen. Wenn ich jetzt aber auf das Scrollrad klicke (mittlere Maustaste) und meine Maus nach links bewege, scrolle ich trotzdem nach rechts. Genau so auf dem Ipad. Ich kann einfach per touch nach recht scrollen. Nun möchte ich das verhindern. Kann mir jemand helfen?

...zum Beitrag

CSS-Table zentrieren?

Hallo!

Ich möchte dieses Diagramm und diese Tabelle zentrieren? Doch wie geht das?



<div id="curve_chart" style="width: 900px; height: 500px"></div>

<table class="center">
    <thead>
        <tr>
            <th>ID</th>
            <th>Temperatur</th>
            <th>Zeitpunkt</th>
        </tr>
    </thead>
    <tbody>
        {% for temp in temps %}
        <tr>
            <td>{{temp.id }}</td>
            <td>{{temp.temperatur }}</td>
            <td>{{temp.zeitpunkt }}</td>
        </tr>
        
        {% endfor %}
        
    </tbody>
</table>


{% endblock %}

...zum Beitrag

CSS Problem mit Firefox?

Ich will gerade ein kleines CSS-only Dropdown-Menü mittels der Pseudoklasse :focus realisieren. Das funktioniert in Chrome, Edge und Safari super, nur Firefox schießt hier quer und die Links lassen sich nicht anklicken. Meine Vermutung ist, dass es bei Firefox ein Timing-Problem gibt und – vereinfacht gesagt – blur vor click kommt und click ins leere läuft, da der Link dann unsichtbar ist.

Hier ein ganz einfacher Testcase:

HTML

<nav>
 <span class="menu" tabindex="-1">
  Menü aufrufen
  <ul>
   <li><a href="https://www.gutefrage.net/" target="_blank">Gutefrage</a></li>
   <li><a href="https://www.google.com/" target="_blank">Google</a></li>
  </ul>
 </span>
</nav>

CSS

.menu {
 position: relative;
 border: 1px solid silver;
 border-radius: 5px;
 padding: 4px 8px;
}

.menu:focus {
 background-color: coral;
}

.menu ul {
 display: none;
}

.menu:focus ul {
 position: absolute;
 display: block;
}

Link

https://jsfiddle.net/Babelfisch/bck65qeo/6/

Hat jemand eine Idee, wie ich Firefox hier dazu bringen kann, sich wie alle anderen Browser zu verhalten? Ich bin hier gerade mit meinem Latein am Ende, will das ganze aber ungern begraben oder unnötig Javascript dafür nutzen.

...zum Beitrag

Blog in HTML erstellen?

Also ich habe schon vor längerer Zeit für einen Freund von mir eine Website erstellt. Pures HTML und CSS - kein Websitebuilder. Doch jetzt sollte auch noch eine Art Blog dazukommen. Da mein Freund nicht ganz so technikaffin ist, benötigt er auch noch eine Eingabeseite wo er seine Texte erstellt, die dann automatisch zu Inhalten der Blogseite werden.

Ich muss gestehen, dass ich eine solche Applikation noch nie programmiert habe, bin aber bereit zu lernen wie es geht. Nur bräuchte ich dafür einen ersten Anhaltspunkt wie man das am Besten anlegen sollte.

Kennt von euch jemand ein Open-Source Blog Projekt wo man sich das ein bisschen anschauen kann, oder eine Tutorialserie dazu?

...zum Beitrag

Website Erstellen lassen?

Hallo liebe Community hat jemand eine Ahnung wo man sich günstig seine eigene Webseite für die Firma erstellen lassen kann

danke schonmal im Voraus für alle antworten

...zum Beitrag

Flask Website lädt oft Ressourcen nicht?

Ausgangslage:

Flask Backend über CGI deployed
Alle genutzen Ressourcen (CSS, Images, Videos, etc.) werden über url_for() importiert
CGI daher, weil es sich um einen gemieteten Strato Server handelt und dieser im "Hosting Basic" Paket nur CGI akzeptiert. (Wer andere Infos darüber hat, gerne her damit)

Problem:

In 30% der Fälle lädt die Seite ohne Probleme, alle Inhalte werden korrekt geladen und angezeigt
In 35% der Fälle lädt die Seite zwar (auch die JS Datei, die die Loading Page nach dem vollständigen Laden der Seite entfernt) aber es fehlen Videos im Hintergrund
In weiteren 35% der Fälle wird der Loading Screen angezeigt, aber weder Bilder, Videos, CSS Dateien, noch die JS Datei, die den Loader entfernt, werden geladen, wodurch nur der Loader zu sehen ist.

Konsole schmeißt für jede Ressource den Fehlercode 500 aus

Error Log zeigt immer, immer wieder:

End of script output before headers: [NAME].cgi

Alle Dateien im Ordner cgi-bin, sprich alle Page relevanten Files haben die Permission 755

Ist der Server einfach manchmal überlastet? Und hat hier noch jemand Ideen, was ich noch versuchen kann?

Vielen Dank im Voraus!

...zum Beitrag

CSS Grid leere Zelle?

Hi,

bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.

Aktuelle habe ich folgenden Code

<div class="grid-container">
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <input type="text" class="grid-item">
  <div class="grid-item">Ein Text</div>
  <select class="grid-item"></select>
  <div class="grid-item">Ein Text</div>
</div>

CSS 
.grid-container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(4, 1fr);
}

https://jsfiddle.net/tb2e75L8/2/

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?

Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.

Vielen Dank im Voraus

whgoffline

...zum Beitrag

Username auslesen aus einer mysql datenbank mit php?

Ich habe eine Datenbank, in der man sich mit meinem php script einloggen kann.

Jetzt möchte ich gerne, dass der user mit seinem angegebenen Namen angesprochen wird. Dafür müsste ich die zu dieser id gehörigen reihe auslesen an der stelle name.

Irgendwie habe ich aber drei Ergebnisse, wahrscheinlich alle drei personen, die schon in der Datenbank sind.

Deshalb hier meine Frage:

Wie lese ich nur genau ein Feld der Datenbank aus, und speichere das Ergebnis dann in der Variablen, die ich in Text einbinden kann?

Vielen Dank

...zum Beitrag

Grid mit Tailwind CSS und 1fr?

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

...zum Beitrag

Programmierung herkömmlich HTML versus CMS?

Früher habe ich Websites mit Dreamweaver gemacht, sprich mit HTML und ensprechender Datenbank-Anbindung. Heute kann man ja auf verschiedene Frameworks und Content Management Systeme zurückgreifen.

Welche Gründe sprechend heute dagegen es wie früher händisch zu machen?

...zum Beitrag

Stichpunkte mit Html bearbeiten?

Hii ich versuch gerade html zu lernen und will listen machen.

So sieht die Website gerade aus:

Ich möchte das der text von den verschiedenen Stichpunkten verschiedene farben hat also, dass Katze: Lila Hund:Pink Otter:blau. Außerdem möchte ich das die herzen for den Stichpunkten Pfoten sind.

Das ist mein Code:

Wie muss ich den abändern damit das funktioniert?

(Außerdem funktioniert meine Css Datei nicht wäre nett wenn mir da auch wer weiterhelfen könnte)

...zum Beitrag

JavaScript Textboxen die aufklappen

Kann kein JavaScript. Kann man das vielleicht so umschreiben, dass es möglich wird, in den Link auch noch etwas anderes rein zu schreiben als wie die Wörter die in dem Script abgeglichen werden. Also "[Aufklappen]" und "[Schliessen]" ...

Ich will halt, dass man auf der ganzen div-box, die um den Link liegt, drauf klicken kann..

var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) {
if (ie4) {
return document.all[id];
} else {
return document.getElementById(id);
}
}
function toggle(link, divId) {
var lText = link.innerHTML; var d = getObject(divId);
if (lText == '[Aufklappen]') {
link.innerHTML = '[Schliessen]'; d.style.display = 'block';
} else { link.innerHTML = '[Aufklappen]'; d.style.display = 'none';
}
}




<div>
    <div>
        <a href="javascript: void(0);" onClick="toggle(this, 'box1');">[Aufklappen]</a>
    </div>
    <div id="box1" style=display:none>
        // Inhalt aufgeklappt
    </div>
</div>

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen