Html iframe应该填充身体的其余部分（使用左侧导航栏）_Html_Css

Html iframe应该填充身体的其余部分（使用左侧导航栏）

html css

Html iframe应该填充身体的其余部分（使用左侧导航栏）,html,css,Html,Css,只是一个简单的问题。基本上我现在有两个问题，第一所以我想要的是用身体的其他部分填充这个iframe，实际上是试过的宽度：100%；身高：100%；但是它们都没有逻辑上起作用，因为它实际上会切断导航栏，所以不会起作用第二个问题是如何修复我希望导航栏被填充，但如果分辨率较低，它应该可以滚动到最后一个链接 HTML: <html> <head> <link rel="stylesheet" type="text/css" href="stylesheets\

只是一个简单的问题。基本上我现在有两个问题，第一

所以我想要的是用身体的其他部分填充这个iframe，实际上是试过的宽度：100%；身高：100%；但是它们都没有逻辑上起作用，因为它实际上会切断导航栏，所以不会起作用

第二个问题是如何修复我希望导航栏被填充，但如果分辨率较低，它应该可以滚动到最后一个链接

HTML:

<html>

<head>
    <link rel="stylesheet" type="text/css" href="stylesheets\home.css">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="font-awesome\css\font-awesome.min.css"> 
</head>

    <body>
        <div id="main">

            <div id="main-menu">
                <div id="navbar">
                    <a href="home.html"><img id="logo" src="img/favicon.ico"></a>
                    <ul>
                        <li id="selected"><a id="category" href="...html">LINK 1</a></li>
                        <li><a id="category" href="...html">LINK 2</a></li>
                        <li><a id="category" href="...html">LINK 3</a></li>
                        <li><a id="category" href="...html">LINK 4</a></li>
                        <li><a id="category" href="...html">LINK 5</a></li>
                    </ul>
                </div>

                <div id="logout">
                    <a id="category" href="...html">Einstellungen</a>
                </div>
            </div>

            <div id="content">
                <div id="changelog">
                <iframe src="https://webmail.htlinn.ac.at/gw/webacc"></iframe>
                </div>
            </div>

        </div>
    </body>

</html>

像@ChrisM是的，这很完美，我只是不知道%，每个分辨率上的宽度都不同吗？我的意思是%是基于显示器的分辨率吗？它是基于窗口/视口的宽度。设备的分辨率无关紧要

body {
   margin: 0px; 
   background-color: #EBE7DF; 
}


#main-menu {
    width: 90px;
    background-color: #1C1C1F;
    float: left;
}


li {
    list-style-type: none;
    padding-top: 35px;
    margin-bottom: 20px;
    text-align: center;
}

#category {
    text-decoration: none;
    color: white;
    font-family: droid-sans, sans-serif;
    font-size: 12px;
    transition: all .3s ease-in-out;
    transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    transition-delay: initial;
}

ul {
    padding: 0px;
    margin: 0px;
}

#category:hover {
    color: darkgrey;
}

#logout {
    float: left;
    bottom: 10px;
    left: 6px;
    position: absolute;
    color: white;
    font-size: 12px;
}

#selected {
    border-left: 3px solid #84BD00;
}

#logo {
    width: 50px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-top: 10px;
}

#content {
    margin-left: auto;
    margin-right: auto;
    display:table;

}

#changelog {

}

#main {
    width: 100%;
    height: 100%;
}

h1 {
    font-family: droid-sans, sans-serif;
}

#navbar {
    height: 100%;

}