CSS height and max gleichzeitig?

Hallo,

Ich habe einem Div-Element gesagt, dass es eine Breite von 40% und eine Höhe von 100% haben soll, aber der nutzt jetzt irgendwie nur die Breite, und nicht die höhe. Woran kann das liegen?

3 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

16.09.2022, 17:07

Das Element orientiert sich an den Dimensionen seines Elternelements. Relativ dazu werden die 100% belegt.

GamersGame

18.09.2022, 05:28

vh, vw

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

16.09.2022, 17:13

am einfachsten wäre dann

https://jsfiddle.net/TechPech1984/b1amsguj/

<body>
  <div id="divbox">
  
  </div>
</body>

body { height: 100vh; }
#divbox {
         height: 100vh;
         background-color: #FF0000;
         }

damit hat das eltern element wie regex9 sagte, also der body 100 vh höhe und damit das kind element auch 100 vh höhe

Ähnliche Beiträge

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zum Beitrag

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

CSS header nimmt nicht volle breite?

Hallo,

Also ich hab einen Header erstellt, mit folgendem HTML Code:

<header>
    <p>Jetzt auch mit KLARNA zahlen!</p>
</header>

CSS Code:

 header {
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: rgb(102, 102, 102);
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Aber wenn ich nun mir mal per Untersuchen, die Webseite anschaue:

Dann sieht man, dass der header ab einem gewissen zeit punkt nicht mehr die volle breite nimmt. Warum?

...zum Beitrag

Joomla! / Beez3-Template: Wie kann ich die Dimensionen des .logoheader in der CSS ändern?

Hallo,

folgende Daten sind derzeit in der in der personal.css hinterlegt:

.logoheader {
  background: url(../images/personal/personal2.png) no-repeat right;
  size:
  width: 100%;
  height: auto
  bottom #0C1A3E;
  color: #FFFFFF;
  height: 288px;
  max-height: 100%;
  width: 1030px;
  max-width: 100%;
  border-bottom: solid 1px #040404;
  border-top: solid 1px #040404;
  border-left: solid 1px #040404;
  border-right; soild 1px #040404;

Ich möchte erreichen, dass der .logoheader eine fixe Höhe und Breite hat und der Inhalt an dieses angepasst wird.

...zum Beitrag

im CSS ein sticky Element auf Bildschirmhöhe?

Ich arbeite gerade an einer Website, wobei ich mit einem CSS-Grid die Bereiche header, nav, footer und main definierte. Mein nav ist dabei auf der rechten Seite des Bildschirms und nimmt 15% der Breite ein. Es sollte sticky sein, da es nur aus 4 Bildern besteht, welche immer zu sehen sein sollten. Dies habe ich schon so. Nun ist das Problem, dass wenn ich scrolle, die Bilder nach oben scrollen, anstatt dort zu bleiben. (Das nav ist so zu sagen zu lang und danach kommt einfach nur noch die Hintergrundfarbe des nav). Wie kann ich machen, dass es eigentlich 100% der Höhe des Bildschirms einnimmt und dann so bleibt?

Seite beim Öffnen

Seite beim bisschen runter scrollen (so sollte es schlussendlich beim weiterscrollen auch sein)

Seite beim noch weiterscrollen

...zum Beitrag

Größe des Eltern div-Container an die Größe der Kinder div-Container anpassen?

Hey Leute. Ich bin gerade dabei eine Seite zu erstellen und gleichzeitig CSS zu lernen.

Jetzt bin ich dabei eine Seite zu designen, die Einzelheiten eines Benutzers zeigen soll. Nur bekomme ich das mit den div-Containern einfach nicht hin.

Meinem Verständnis nach ist das so, dass wenn ich einen Container habe, in dem zwei weitere Container sind die nebeneinander angeordnet sind und ich dann beiden die Höhe 100% gebe, dann müssten beide doch die maximale Höhe des Eltern Containers annehmen, oder verstehe ich da was falsch? Weil ich bekomme das einfach nicht auf die Reihe. Ich hab mal ein Bild angehängt in dem der Eltern Container (grau) der erste Kind Container (grün) und der zweite Kind Container (gelb) eingefärbt sind. Und da sieht man gut dass der Kind Container einfach über dem Eltern Container hinausschießt..

Ich hänge nochmal den Code aus dem HTML und dem CSS an. Vielleicht habe ich ja auch einen Denkfehler oder kenne mich einfach nur noch nicht genug in CSS aus und jemand kann mir helfen :)

Hier die Container: (Ich hoffe der Code wird richtig eingefügt. Irgendwie ändert sich hier im gutefrage Editor nichts)

<div class="benutzerprofil">
<div class="anschrift">
    <div class="uberschrift">
        <a class="uberschrift">Anschrift</a>
    </div>
    <div class="inhalt">
        <a class="anschrift">
        <?= $user->vorname . " " . $user->nachname ?><br>
        <?= $user->strasse . ", " . $user->hausnummer ?><br>
        <?= $user->postleitzahl . " " . $user->wohnort ?><br>
        <?= $user->bundesland ?>
        </a>
    </div>
</div>

<div class="erreichbar">
    <div class="uberschrift">
        Partner erreichbar unter
    </div>
    <div class="inhalt">
        <span class="erreichbar">
        E-Mail Adresse: <a href="mailto:<?= $user->email ?>"><?= $user->email ?></a><br>
        Handynummer: <?= (($user->handynummer==null)?"Nicht angegeben":$user->handynummer) ?><br>
        Telefonnummer: <?= (($user->telefonnummer==null)?"Nicht angegeben":$user->telefonnummer) ?>
        </span>
    </div>  
</div>
</div>

Und hier der CSS Code dafür:

div.anschrift {
    height: 25%;
    background-color: gray;
}

div.anschrift > div.uberschrift {}
    float: left;
    background-color: green;
    height: 100%;
}

div.anschrift > div.inhalt {
    height: 100%;
    background-color: yellow;
}

...zum Beitrag

Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

...zum Beitrag

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

...zum Beitrag

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zum Beitrag

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zum Beitrag

Wieso ändert sich bei height und width nur die Position des Elements?

Hallo zusammen,

ich versuche mit CSS meinen Slider höher bzw. breiter zu stellen (mit width und height).

Leider ändert sich nur die Position des Sliders. Weiß jemand, wo das Problem ist bzw. wie man es beheben kann?

Es ist ein .slider bei CSS und ich benutze VS, falls diese Info relevant sein sollte.

...zum Beitrag

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zum Beitrag

HTML / CSS: Mein div wird oben abgeschnitten?

https://jsfiddle.net/qkw45jne/1/

Wenn der Bildschirm zu klein wird (in der Höhe), wird das rote div oben teilweise abgeschnitten. Scrollbars kommen aber trotzdem, da die teile drunter vollständig zu sehen bleiben.

Was muss ich ändern, dass auch das rote div immer vollständig da bleibt?

In dem jsfiddle könnt ihr das recht einfach nachstellen, indem ihr die mittlere grenze hoch schiebt. Dann wird irgendwann auch der text im roten div sichtbar:

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen