Html 如何使静态div以100%的高度占据页面的一半
我试图使一个静态div停留在屏幕左侧的50%，并作为导航功能。内容将位于右侧，可滚动。这个网站就是一个例子 有人能帮我把这个坚果砸碎吗？谢谢 这应该行得通Html 如何使静态div以100%的高度占据页面的一半,html,css,Html,Css,我试图使一个静态div停留在屏幕左侧的50%，并作为导航功能。内容将位于右侧，可滚动。这个网站就是一个例子 有人能帮我把这个坚果砸碎吗？谢谢 这应该行得通 <div style="width: 50%;"> <div style="float:left; width: 50%"> Navigation </div> <div style="float:right;"> Other Stuff </div&g
<div style="width: 50%;">
<div style="float:left; width: 50%">
Navigation
</div>
<div style="float:right;">
Other Stuff
</div>
</div>
<div style="width: 50%;">
<div style="float:left; width: 50%">
Navigation
</div>
<div style="float:right;">
Other Stuff
</div>
</div>
将两个div的宽度设为50%宽度：50%； 并使你的一个位置固定：固定 HTML
查看此代码笔了解更多详细信息将两个div的宽度设置为50%宽度：50%； 并使你的一个位置固定：固定 HTML
查看此代码笔了解更多详细信息好的，首先我假设您需要纯CSS格式的代码，所以这里我将为您提供代码。此代码将使浮动对不同的屏幕大小作出反应 身体{ 边际：0px； } 主导航{ 背景颜色：浅蓝色； 位置：固定； 浮动：左； 边际：0px； 垫面：20%； 垫底：40%； 宽度：50%； } 主导航李{ 列表样式：无； 字号：1.5em； 左：35%； } 其他内容{ 背景颜色：蓝色； 颜色：白色； 浮动：对； 边际：0px； 垫面：10%； 垫底：50%； 左：21%； 右：5%； } 标题、图像或标题 所有这些内容都是假定的 洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图 告别精英。马莱苏阿达大酒店 nec ligula eget，hendrerit porttitor mauris。 请进。
好的，首先我假设你想要纯CSS的，所以这里我会给你代码。此代码将使浮动对不同的屏幕大小作出反应 身体{ 边际：0px； } 主导航{ 背景颜色：浅蓝色； 位置：固定； 浮动：左； 边际：0px； 垫面：20%； 垫底：40%； 宽度：50%； } 主导航李{ 列表样式：无； 字号：1.5em； 左：35%； } 其他内容{ 背景颜色：蓝色； 颜色：白色； 浮动：对； 边际：0px； 垫面：10%； 垫底：50%； 左：21%； 右：5%； } 标题、图像或标题 所有这些内容都是假定的 洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图 告别精英。马莱苏阿达大酒店 nec ligula eget，hendrerit porttitor mauris。 请进。
基本上，它是两种不同CSS设置的组合： 左侧的导航部分有一个固定位置，定义了它在显示中的固定位置，并设置为100%高度和50%宽度。 右侧的内容部分设置为向右浮动字面上的浮动：右；在CSS中，宽度设置为占据剩余的50%。 下面的HTML是一个虚构的示例，基于您链接到的站点。只需复制html，将其粘贴到文本编辑器中，然后将文件另存为largenav.html或其他html文件。然后在浏览器中打开它
<html>
<head>
<style type="text/css">
#nav {
width:50%;
height:100%;
position: fixed;
top: 0;
left: 0;
background: #FF8833;
}
#content {
width: 50%;
float: right;
background: #3388FF;
}
div.scrollsection {
border: 1px solid #FF0000;
display: block;
height: 1000px;
background: #888888;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>First Nav</li>
<li>Second Nav</li>
<li>etc.</li>
</ul>
</div>
<div id="content">
<div class="scrollsection">First chunk of scroll content</div>
<div class="scrollsection">Second chunk of scroll content</div>
<div class="scrollsection">Third chunk of scroll content</div>
<div class="scrollsection">[You get the idea...]</div>
</div>
</body>
</html>
我还建议您亲自熟悉您最喜欢的浏览器中的开发人员工具，我使用GoogleChrome进行所有初始开发，只是因为开发人员工具。然而，我不想启动flame war FireFox有一些好的内置工具和优秀的插件，让生活变得精彩，我没有使用MS Edge，但IE开发者工具随着时间的推移越来越好。基本上，它是两种不同CSS设置的组合： 左侧的导航部分有一个固定位置，定义了它在显示中的固定位置，并设置为100%高度和50%宽度。 右侧的内容部分设置为向右浮动字面上的浮动：右；在CSS中，宽度设置为占据剩余的50%。 下面的HTML是一个虚构的示例，基于您链接到的站点。只需复制html，将其粘贴到文本编辑器中，然后将文件另存为largenav.html或其他html文件。然后在浏览器中打开它
<html>
<head>
<style type="text/css">
#nav {
width:50%;
height:100%;
position: fixed;
top: 0;
left: 0;
background: #FF8833;
}
#content {
width: 50%;
float: right;
background: #3388FF;
}
div.scrollsection {
border: 1px solid #FF0000;
display: block;
height: 1000px;
background: #888888;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>First Nav</li>
<li>Second Nav</li>
<li>etc.</li>
</ul>
</div>
<div id="content">
<div class="scrollsection">First chunk of scroll content</div>
<div class="scrollsection">Second chunk of scroll content</div>
<div class="scrollsection">Third chunk of scroll content</div>
<div class="scrollsection">[You get the idea...]</div>
</div>
</body>
</html>
我还建议您亲自熟悉您最喜欢的浏览器中的开发人员工具，我使用GoogleChrome进行所有初始开发，只是因为开发人员工具。然而，我不想启动flame war FireFox有一些好的内置工具和优秀的插件，让生活变得精彩，我没有使用MS Edge，但IE开发工具随着时间的推移变得越来越好。今天我感觉像是意大利面，我感觉像是意大利面