x-kom hosting

Czemu #right-navbar nie chce przyjąć 100% wysokości

Gość
utworzono
utworzono

Napotkałem się na problem gdzie <div>div</div> #right-navbar jest umieszczony w elemencie o większej wysokości
niż jego domyślna a dając mu width: 100% jego wysokość się nie zmniejsza.

PS:

czemu position: absolute; umieszcza element wzg. ekranu a nie strony, czy mogę zrobić żeby element był po prawej stronie poza widoczną częścią strony
bez floatów i za pomocą position: absolute; ?

kodziki:

(html)

<!Doctype html>
<html lang="pl-PL">
    <head>
        <meta charset="UTF-8">
        <title>Dom Projektu</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="content">
            <div id="topbar">
                <div id="title">
                    <img src="img/tech/js.png"><div yellow>Javascript</div>
                </div>
            </div>
            <div id="navbar">
                <span vscblue>Technologie Webowe</span>
                
                <div>
                    <img src="img/tech/java_script.png"><a href="java.html" vscorange>Java</a>
                </div>
                <div>
                    <img src="img/tech/php.png"><a href="php.html" vscblue>PHP</a>
                </div>
                <div>
                    <img src="img/tech/nodejs.png"><a href="nodejs.html" vscgreen>Node.js</a>
                </div>
                <div>
                    <img src="img/tech/python.png"><a href="python.html" vscblue><span cyellow>Py</span>thon</a>
                </div>
                <div>
                    <img src="img/tech/angular.png"><a href="angular.html" red>Angular</a>
                </div>
                <div>
                    <img src="img/tech/react.png"><a href="react.html" vsclblue>React</a>
                </div>
                <div>
                    <img src="img/tech/jquery.png"><a href="jquery.html" vscblue>jQuery</a>
                </div>
                <div>
                    <img src="img/tech/bootstrap.png"><a href="bootstrap.html" cpurple>Bootstrap</a>
                </div>
                <div>
                    <img src="img/tech/js.png"><a href="js.html" yellow>Javascript</a>
                </div>
                <div>
                    <img src="img/tech/html.png"><a href="html.html" orange>Html</a>
                </div>
                <div>
                    <img src="img/tech/css.png"><a href="css.html" vscblue>Css</a>
                </div>
            </div>
            
            <!int ><main><! (int argc, char* args[])>
                <div embed="clear" style="--bgc: yellow; --txtc: lightgrey;">
                    <div lang-ico style="--color: yellow; --img: url('img/tech/js.png')"></div>
                    <span vsclblue>Javascript</span> - język skryptowy interpretowany po stronie przeglądarki
                     do tworzenia interaktywnych stron internetowych.</br></br>
                    Jego początki sięgają <span vscgreen>lat 70 ubiegłego wieku</span>.</br>
                    Prace nad nim zostały rozpoczęte <span cyellow underline>z powodu zapotrzebowania</span><span orange> producentów urządzeń
                     o różnych standardach pracy </span><span cyellow underline>różnych funkcjonalności.</span>
                </div>
                <div titleel>Historia języka</div>
                <ul>
                    <li>pił</li>
                </ul>
                
            </main>
            
            <div id="right-navbar">
                <!>
            </div>
            
        </div>
    </body>
</html>

 

 

(style.css)

@import url("./util.css");

@font-face {
    font-family: mc-reg;
    src: url("fonts/Mojang-Regular.ttf");
}

@font-face {
    font-family: Source Code Pro;
    src: url("fonts/scp/SourceCodePro-Regular.ttf");
}

@font-face {
    font-family: Source Code Pro Bold;
    src: url("fonts/scp/SourceCodePro-Bold.ttf");
}

@layers utils, main;
body{
    --bgcolor: rgba(35,35,35, 0.3);
    --bgimg: url("img/bg2.png");
    --darker-bgcolor: rgba(30,30,30, 0.7);
    --lighter-bgcolor: rgb(50,50,50, 0.7);
    --main: rgb(0,50,100);
    --main-lighter: rgb(0,60,110);
    --main-darker: rgb(0,40,90);
    --bottom-shadow: 0 2px 5px 0 rgba(0,0,0,0.4);
    --nav-shadow: 0 3px 6px rgba(0,0,0,0.4);
    --light-nav-shadow: inset -20px 0px 4px -3px rgb(255,255,255);
    #--topbarc: rgb(0,50,100);
    --topbarc: rgb(30,30,30);
}
@layer main{
    body {
        background-color: var(--bgcolor);
        
        background-image: var(--bgimg);
        background-size: 100% 100%;
        background-repeat: repeat-y;
        background-position: center;
        background-attachment: fixed;
        
        color: white;
        font-size: 20px;
        font-family: Calibri;
    }
    *{
        margin: 0;
        padding: 0;
    }
    
    #content{
        width: 100%;
        min-width: 760px;
        margin-right: auto;
        margin-left: auto;
    }
    
    #topbar{
        width: 100%;
        height: 80px;
        background-color: var(--topbarc);
        box-sizing: border-box;
        box-shadow: var(--bottom-shadow);
        z-index: 2;
        position: fixed;
    }
    
    #title{
        width: 100%;
        text-align: center;
        font-size: 45px;
        line-height: 80px;
        font-weight: 400;
        font-family: Arial;
        letter-spacing: 3px;
    }
    #title > img{
        width: 60px;
        height: 60px;
        position: relative;
        top: 10px;
    }
    #title > div{
        display: inline-block;
        position: relative;
        bottom: 5px;
    }
    
    #navbar{
        background-color: var(--darker-bgcolor);
        display: inline-block;
        position: fixed;
        width: 15%;
        height: calc(100% - 80px);
        overflow-y: scroll;
        z-index: 1;
        box-shadow: var(--nav-shadow);
        min-width: 220px;
        font-family: Source Code Pro;
        box-sizing: border-box;
        top: 80px;
    }
    #navbar > span{
        text-align: center;
        font-size: calc(15px + 0.5vw);
        display: block;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
    }
    #navbar > div{
        width: 100%;
        height: 70px;
        box-sizing: border-box;
        padding: 5px;
    }
    #navbar > div > img{
        width: 60px;
        height: 60px;
        position: relative;
        top: 0px;
        border-radius: 10px/10px;
    }
    #navbar > div > a{
        line-height: 60px;
        margin-top: 5px;
        margin-bottom: 5px;
        display: inline-block;
        position: relative;
        bottom: 23px;
        width: calc(100% - 60px);
        box-sizing: border-box;
        padding-left: 10px;
        border-radius: 5px/5px;
        height: 70px;
        font-size: 20px;
    }
    
    #navbar > div:hover{
        transition-duration: 0.1s;
        transition-timing-function: linear;
        background-color: var(--lighter-bgcolor);
    }
    
    main{
        width: calc(70% - 20px);
        display: inline-block;
        margin-left: calc(15% + 10px);
        padding: 10px;
        box-sizing: border-box;
        box-shadow: inset 0 0 50px 5px rgba(0,0,0,0.5);
        background-color: var(--bgcolor);
        margin-top: 90px;
        border-radius: 10px/10px;
        min-width: 300px;
    }
    
    main > * {
        margin-bottom: 5px;
    }
    
    #right-navbar{
        display: inline-block;
        position: relative;
        width: 15%;
        height: 100%;
        z-index: 1;
        box-shadow: var(--nav-shadow);
        min-width: 220px;
        box-sizing: border-box;
        padding: 5px;
    }
    
    *[lang-ico]{
        --color: rgb(255,0,0);
        --img: url("img/tech/js.png");
        float: left;
        width: 200px;
        height: 200px;
        margin: 10px;
        border-radius: 20px/20px;
        background-color: rgba(20,20,20);
        overflow: hidden;
    }
    *[lang-ico]::after{
        content: url("<div> </div>");
        background-image: var(--img);
        background-size: 90% 90%;
        background-position: 10px 10px;
        background-repeat: no-repeat;
        width: 190px;
        height: 190px;
        display: block;
        position: relative;
        top: 5px;
        left: 5px;
        border-radius: 15px/15px;
        background-color: rgb(40,40,40);
    }
    *[lang-ico]::before{
        content: url("<div> </div>");
        display: block;
        position: relative;
        float: left;
        width: 300px;
        height: 100px;
        right: 50px;
        top: 60px;
        background-color: var(--color);
        box-shadow: 0 0 20px 10px var(--color);
        animation: rotate 5s linear infinite;
    }
}

@keyframes bgscroll {
    from {background-position: 50%, 0%;}
    to {background-position: 50% 100vh;}
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@media screen and (max-width: calc(220px / 0.15)){
    main{
        width: calc(100% - 460px);
        margin-left: 230px;
    }
}

AnyDuck
komentarz
komentarz

Przydałoby się jakieś zdjęcie tego jak to wygląda, bo ułatwiłoby to znacząco ogarnięcie w czym jest problem ;)

Gość
komentarz
komentarz

ten element co wygląda jak cień

Dodaj odpowiedź bez logowania

Dodajesz wpis jako gość. Pamiętaj, że to jest forum komputerowe.
Informacja: Twój wpis zostanie opublikowany po weryfikacji przez moderatora.

Gość
Dodaj odpowiedź do tematu...

×   Wklejono zawartość z formatowaniem.   Usuń formatowanie

  Maksymalnie dozwolone są tylko 75 emotikony.

×   Odnośnik został automatycznie osadzony.   Przywróć wyświetlanie jako odnośnik

×   Przywrócono poprzednią zawartość.   Wyczyść edytor

×   Nie możesz bezpośrednio wkleić grafiki. Dodaj lub załącz grafiki z adresu URL.

Ładowanie
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Strona wykorzystuje pliki cookies w celu prawidłowego świadczenia usług i wygody użytkowników. Warunki przechowywania i dostępu do plików cookies możesz zmienić w ustawieniach przeglądarki.