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 Fragesteller 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

Fragesteller

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

Fragesteller

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 Fragen

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>

...zur Frage

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>

...zur Frage

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?

...zur Frage

Projektideen für Webentwicklung gesucht?

Hey Leute, da wir am Ende des Jahres in der Schule ein Projekt abschließen müssen, wollte ich euch fragen, welche Ideen ihr im Bereich Webentwicklung habt.

Das Projekt muss in Gruppen von jeweils 2 bis 3 Personen umgesetzt werden.

Wir müssen sowohl Backend als auch Frontend in unser Projekt integrieren und eine Datenbank verwenden.

Habt ihr Vorschläge, was wir machen könnten?

Meine Erfahrung mit Webentwicklung ist, dass ich weder Anfänger noch fortgeschritten bin.

...zur Frage

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?

...zur Frage

DE Sonderzeichen Fehler in HTML?

Hi,

ich sitze momentan an einer Datei, um ein paar Dinge auszuprobieren. Ich habe die Meta-Tags wie gewohnt aus einer anderen (funktionierenden) Datei kopiert.

Nun werden allerdings ausschließlich in meiner Datei die Umlaute wie Ä,Ö,Ü und ß mit

"�"

angezeigt. Auch das rein-kopieren Tags aus anderen Dateien, oder das entfernen des Stylesheets hat nix geändert. Kurzzeitig hatte ich auch den Meta-Tag:

mit reingenommen, allerdings ohne Erfolg oder Veränderungen. Auch das Debugging von W3C hat nix auffälliges gefunden:

Für alle helfenden Hände großes Danke!

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="example, html, head, meta">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="formate.css">
    <title>Das Box-Modell</title>
  </head>


<body>
  <header>
      
    <div class="flex">
     <img src="bilder/logo.svg" alt="logo">
    </div>
    
     <h1>Wilkommen auf der Test-Seite!</h1>
     <nav>
              <a href="#link_1.html">Blog</a>
              <a href="#link_1.html">Unterseite 1</a>
              <a href="#link_1.html">Unterseite 2</a>
              <a href="#link_1.html">Kontakt</a>
     </nav>
          
    </header>
      
      <main>
          
          <h2>ÜÜÜCCS-basierte Layouts <br><br />HTML-Struktur ohne CSS</h2>         
          
      </main>
    
    
    
    <footer>
     <a href="kontakt.html">Kontakt</a>
     <p>&copy; 2024 by GTA1A</p>
    </footer>


</body>
</html>

...zur Frage

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!

...zur Frage

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?

...zur Frage

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.

...zur Frage

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

...zur Frage

Html Passwort?

Guten Tag ich bin dabei eine seite zu programmieren auf welcher man einen key eingeben muss und dann weiter geleitet wird jedoch stoße ich hirbei auf probleme und zwar ist das passwort schon automatisch eingegeben und man kann eingeben was man will man wird trotzdem weitergeleitet wie kann ich das beheben hier der code :

<!DOCTYPE html>
<html>
<body>
<h1>Key</h1>
<form action="/action_page.php">
 <label for="key">Key:</label>
 <input type="password" id="key" name="key" value="1234"><br><br>
 <input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "hier kommt noch ein link".</p>
</body>
</html>

...zur Frage

Webview php seite local hosten?

Hallo, ich bin gerade ein bischen am rumprobieren mit webview in android studio, ich würde gerne eine kleine Website welche php, html und js enthält local auf dem Gerät hosten und auch auf diese in webview anzeigen. Ist dies möglich, sodass ich auch Dateien in eine json Datei schreiben kann?

...zur Frage

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

...zur Frage

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>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen