[CSS] <a side> <nav> element bis zum ende der Seite

[#Saiirex]

Hey, ich möchte meine Navigation, bzw den Hintergrund der Navigation, bis zum ende der Seite machen.

Wenn ich in CSS height: 100% angebe, dann geht es ja nur bis zum Bildschrimende, aber wenn es elemente gibt die mehr platz brauchen reicht das leider nicht mehr aus.

Ich hoffe ich habe meine Frage verständlich ausgedrückt!

[Undaground]

Kannst du das HTML und CSS posten bitte?

[#Saiirex]

Originally Posted by Undaground

Kannst du das HTML und CSS posten bitte?

HTML/PHP:

PHP Code:

<?php
$admin = false;
$standardUser = false;

if(isset($_SESSION['admin'])){
    $admin = true;
}

if(isset($_SESSION['userid'])){
    $standardUser = true;
}
?>
<aside class="asideNav">
    <nav>
        <ul>
            <li class="header">Navigation</li>
            <?php
            if($admin === true){
                //<!--<li><a href="#"></a> </li>-->
                echo'<li><a href="?site=overview">Übersicht</a></li>';
                echo'<li><a href="?site=tickets">Tickets</a></li>';
                echo '<li><a href="?site=administration">Administration</a></li>';
            }
            else if($standardUser === true && $admin === false){
                echo'<li><a href="?site=newticket">Neues Ticket</a></li>';
                echo'<li><a href="?site=mytickets">Meine Tickets</a></li>';
            }
            ?>

        </ul>
    </nav>
</aside>

.asideNav{
    min-width: 150px;
    width: auto;
    background-color: #28546C;
    float:left;
    height: calc(100% - 38px);
}

aside nav ul li.header{
    background-color: #032436;
    width: auto;
    color: white;
    font-size: 12px;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: left;

}

aside nav {
    margin-top: 20px;

}
aside nav ul{
    list-style: none;
}
aside nav ul li{
    display: block;
    margin-top: 5px;
}

aside nav ul li:hover{
    background-color: #032436;
}

aside nav ul li a{
    text-decoration: none;
    font-size: 14px;
    color: #FFFFFF;
    padding-left: 10px;
    padding-right: 30px;
}

Bitte nicht schlagen wenn hässlich :s

[Undaground]

meinst du die Ränder links und oben? -> CSS Reset oder normalize oder einfach

body {
margin: 0;
}




Oder möchtest du den Hintergrund bis zum rechten Rand?

Oder das <aside> Element bis zum Bottom?
Dann entferne das calc(100% - 38px); und schreib da nur 100%; rein

[#Saiirex]

Originally Posted by Undaground

meinst du die Ränder links und oben? -> CSS Reset oder normalize oder einfach

body {
margin: 0;
}




Oder möchtest du den Hintergrund bis zum rechten Rand?

Ich möchte das der Hintergrund komplett bis zum "Boden" geht.

[Undaground]

Originally Posted by #Saiirex

Ich möchte das der Hintergrund komplett bis zum "Boden" geht.

ersetze:

height: calc(100% - 38px);

durch:

height: auto;
min-height: 100%;

[#Saiirex]

Originally Posted by Undaground

ersetze:

height: calc(100% - 38px);

durch:

height: auto;
min-height: 100%;

Habe ich auch schon probiert, sieht dann so aus:



(Das linke Feld muss bis zum ende)

[Undaground]

Originally Posted by #Saiirex

Habe ich auch schon probiert, sieht dann so aus:



(Das linke Feld muss bis zum ende)

Versuch mal:

height: inherit;

andernfalls musst du mit genauen px-Maßen arbeiten.

100% ist immer soweit wie der Bildschirm ist es sei denn du hast ein begrenztes Außenelement.

// edit

andernfalls kannst du es evtl. anders lösen falls der Navigationsbalken nicht weiter für andere Sachen vorgesehen ist.

z.B. wenn du den die Navbar auf height: 100%; position: fixed; setzt

[#Saiirex]

Originally Posted by Undaground

Versuch mal:

height: inherit;

andernfalls musst du mit genauen px-Maßen arbeiten.

100% ist immer soweit wie der Bildschirm ist es sei denn du hast ein begrenztes Außenelement.

// edit

andernfalls kannst du es evtl. anders lösen falls der Navigationsbalken nicht weiter für andere Sachen vorgesehen ist.

z.B. wenn du den die Navbar auf height: 100%; position: fixed; setzt

Mit genauen pixelangaben kommt für mich nicht in frage.
Inherit klappt auch nicht, weil main und aside getrennte elemente sind und body keine höhenangabe hat.

Das mit fixed probiere ich mal.

€: Das die Navbar immer wieder mit kommt ist nicht der sinn. Also leider auch nix für mich. Trotzdem danke.

[~ JWonderpig ~]

body, html {
  height: 100%;
}

Füg diesen Code nochmal zusätzlich hinzu.

[#Saiirex]

Originally Posted by ~ JWonderpig ~

body, html {
  height: 100%;
}

Füg diesen Code nochmal zusätzlich hinzu.

Zusätzlich zu was?

[~ JWonderpig ~]

Deiner CSS Datei

[KingDingD0ng]

Nebenbei wenn du öfters damit Probleme oder fragen hast kannst du mich auch gerne in Skype adden.

[#Saiirex]

Originally Posted by KingDingD0ng

Nebenbei wenn du öfters damit Probleme oder fragen hast kannst du mich auch gerne in Skype adden.

Danke, habe dich geaddet