Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Themen

<div> bei setzung height: auto ohne rahmen und hintergrund

Gast danvan
Gast danvan
in Webdesign

Empfohlene Antworten

Veröffentlicht

hallo,

ich habe ein problem bei meinem stylesheet und kann es mir nicht erklären.

Also die ganze website ist in einem wrapper eingefasst, der einen grauen hintergrund und

einen Rahmen hat 

#mcntb {

margin:0px auto;

border: 1px solid gray;

background-color:#f2fafb;

width: 720px;

height: 500px;

}[/PHP]

so funktioniert alles prächtig, nur wenn ich oben height: auto setze, dann erscheint weder der rahmen noch die hintergrundfarbe. ich vermute, das wird dann automatisch auf 0 gesetzt, dabei soll das div ja genau so lang sein, wie der content im div es erfordert.

in diesem div gibt es ein #txt-div, wo eben der text drinsteht. das ziel ist es, die box so lang zu machen, das genau der text hineinpasst, also muss die länge von "mcntb" variable sein. Ich hatte damit noch nie probleme. Habe schon öfters seiten gemacht, die eben ne variable länge haben und ich arbeite auch immer mit wrappern.

Hat jemand eine Idee, warum die div bei

[CODE]height: auto [/CODE]

nur noch minimal ist und sich nicht am content innen drin orientiert in den anderen divs.

LG

hallo habbeda,

nein, keines der divs ist mit einem float ausgestattet:(

gruß

Dass der Wrapper keine Höhe aufweist heißt für mich, dass sich alle direkten Kindelemente des Wrappers außerhalb des Textflusses befinden. Damit bleiben meines Wissens nur "float" oder eine absolute Positionierung als Ursache.

nein, weder floar noch eien absolute positionierung liegen vor. es ist mir ein rätsel... Dieses problem hatte ich noch nie. Wenn ich in einem div ein anderes div der länge 620 platziere.. dann wird doch das umschließende div automatisch auch auf 620 gezogen, oder nicht? und in diesem fall nicht. obwohl ich nirgends float oder absolute positionierung verwende...

lg

Grundsätzlich stimme ich da zu ;) Lässt sich das irgendwo betrachten?

Um das ganze einmal auf ein ganz simples Beispiel runterzubrechen:


<?xml version="1.0" encoding="UTF-8"?> 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

#wrapper {

	height: auto;

	width: 600px;

	border: 2px solid #000000;

}

#content {

	height: 300px;

	background-color: #FF0000;

}

</style>

</head>

<body>

	<div id="wrapper">

		<div id="content"></div>

	</div>

</body>

</html>

Das dürfte doch rein prinzipiell das sein, was Du möchtest, korrekt?

hallo,

ja, so ähnlich ist es. nichts besonderes, nichts, was ich nicht schon gefühlte tausendmal gemacht hätte. allerdings soll der background im wrapper gesetzt werden Dein beispiel wird in FF z.B. korrekt angezeigt. bei mir ist es ja im endeffekt nicht anders.

mcntb ist bei mir der wrapper, mcnt das hauptfenster

<div id="mcntb">

    <div id="mcnt"> 

      <!-- fixed head -->

        <div id="mallog"><a class="log" href="/" ><img src="log.png" /></a><div>

        <div id="navct">

            <span class="nvlmnt"><a href="#">1.</a></span>

            <span class="nvlmnt"><a href="#">2.</a></span>

            <span class="nvlmnt"><a href="#">3.</a></span>

        </div>

        <!-- /head -->

            <div id="txt">

          <!-- hier der text -->

            </div>  

            <!-- fixed footer -->

              <div id="ndftr">

                <div id="ftrct"></div>

              </div>

            <!-- /footer -->          

    </div>

    </div>

[/PHP]

dazu css:

[PHP]#mcntb {
margin:0px auto;
border: 1px solid gray;
background-color:#f2fafb;
width: 720px;
height: auto;
}

#mcnt {
height: auto;
}

#mallog hat z.B. die länge 120px , #navct hat die länge 180px... also müsste der wrapper doch schon wenigstens 300px lang sein...

das problem ist gelöst. ich weiß zwar nicht, warum, aber ok...

ich setzte:

#mallog { height: 100% }

nun funktioniert alles, wie es soll. das fenster ist nun genauso lang, wie der content im fenster es zulässt. ich frage mich nur, wozu dies nun nötig war...:confused:

herrje, und ich hab zig stunden nach dem fehler gesucht :D

danke.

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.