<a side> <nav> element bis zum ende der Seite

03/21/2016 14:19 #Saiirex#1
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!
03/21/2016 16:21 Undaground#2
Kannst du das HTML und CSS posten bitte?
03/21/2016 16:26 #Saiirex#3
Quote:
Originally Posted by Undaground View Post
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>
HTML Code:
.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
03/21/2016 16:37 Undaground#4
meinst du die Ränder links und oben? -> CSS Reset oder normalize oder einfach

body {
margin: 0;
}


[Only registered and activated users can see links. Click Here To Register...]

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
03/21/2016 16:42 #Saiirex#5
Quote:
Originally Posted by Undaground View Post
meinst du die Ränder links und oben? -> CSS Reset oder normalize oder einfach

body {
margin: 0;
}


[Only registered and activated users can see links. Click Here To Register...]

Oder möchtest du den Hintergrund bis zum rechten Rand?
Ich möchte das der Hintergrund komplett bis zum "Boden" geht.
03/21/2016 16:43 Undaground#6
Quote:
Originally Posted by #Saiirex View Post
Ich möchte das der Hintergrund komplett bis zum "Boden" geht.
ersetze:

height: calc(100% - 38px);

durch:

height: auto;
min-height: 100%;
03/21/2016 17:12 #Saiirex#7
Quote:
Originally Posted by Undaground View Post
ersetze:

height: calc(100% - 38px);

durch:

height: auto;
min-height: 100%;
Habe ich auch schon probiert, sieht dann so aus:

[Only registered and activated users can see links. Click Here To Register...]

(Das linke Feld muss bis zum ende)
03/21/2016 18:00 Undaground#8
Quote:
Originally Posted by #Saiirex View Post
Habe ich auch schon probiert, sieht dann so aus:

[Only registered and activated users can see links. Click Here To Register...]

(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
03/21/2016 19:03 #Saiirex#9
Quote:
Originally Posted by Undaground View Post
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.
03/21/2016 19:26 ~ JWonderpig ~#10
HTML Code:
body, html {
  height: 100%;
}
Füg diesen Code nochmal zusätzlich hinzu.
03/21/2016 19:32 #Saiirex#11
Quote:
Originally Posted by ~ JWonderpig ~ View Post
HTML Code:
body, html {
  height: 100%;
}
Füg diesen Code nochmal zusätzlich hinzu.
Zusätzlich zu was? :D
03/21/2016 19:36 ~ JWonderpig ~#12
Deiner CSS Datei
03/21/2016 20:26 KingDingD0ng#13
[Only registered and activated users can see links. Click Here To Register...]

Nebenbei wenn du öfters damit Probleme oder fragen hast kannst du mich auch gerne in Skype adden. :)
03/21/2016 21:36 #Saiirex#14
Quote:
Originally Posted by KingDingD0ng View Post
[Only registered and activated users can see links. Click Here To Register...]

Nebenbei wenn du öfters damit Probleme oder fragen hast kannst du mich auch gerne in Skype adden. :)
Danke, habe dich geaddet :)