Question

我试图让静态div停留在屏幕左侧的50％处并用作导航。内容将位于右侧并可滚动。一个例子就是这个网站http://minusfirm.com/ 任何人都可以帮我破解这个坚果吗？谢谢！

Answer 1

这应该有用......

<div style="width: 50%;">
   <div style="float:left; width: 50%">
   Navigation
   </div>
   <div style="float:right;">
   Other Stuff
   </div>
</div>

Answer 2

将两个div的宽度设为50％width: 50%; 并使你的一个职位固定position: fixed;

<强> HTML

<div id="nav" class="centertext">
  right side
</div>
<div id="content">
  left side
</div>

<强> CSS

#nav {
    width: 50%;
    position: fixed;
   float: left;

    background: #01ffA0;
}
#content {  
  float:right;
  width: 50%;
    height: 100%;
    float: right;
    background: #0130A0;
}

检查此codepen以获取更多详细信息Link

Answer 3

好吧，首先我假设你想要这个纯CSS，所以在这里我会给你代码。此代码将使浮动对不同的屏幕大小做出反应。

＆＃13;

body {
  margin: 0px;
}
#mainNavigation {
  background-color: lightblue;
  position: fixed;
  float: left;
  margin: 0px;
  padding-top: 20%;
  padding-bottom: 40%;
  width: 50%;
}
#mainNavigation li {
  list-style: none;
  font-size: 1.5em;
  padding-left: 35%;
}
#otherContent {
  background-color: blue;
  color: white;
  float: right;
  margin: 0px;
  padding-top: 10%;
  padding-bottom: 50%;
  padding-left: 21%;
  padding-right: 5%;
}

＆＃13;

<div id="mainNavigation">
  <h1>Heading, Image, or Title</h1>
  <ul>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
  </ul>
</div>
<div id="otherContent">
  <h2>All of this content is assumed</h2>
  <p>Lorem ipsum dolor sit amet, consectetur
    <br />adipiscing elit. Vivamus ante magna, malesuada
    <br />nec ligula eget, hendrerit porttitor mauris.
    <br />Praesent in.
</div>

＆＃13;

通过对媒体查询进行一些调整，此代码将与示例Minus Firm一样具有移动性。我单独添加填充属性的原因是为了帮助可视化代码。

Answer 4

基本上，它是两种不同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>

我还建议您在自己喜欢的浏览器中熟悉开发人员工具（就个人而言，我使用Google Chrome进行所有初步开发，仅仅因为开发工具。但是，我不想开始一场火焰战 - FireFox有一些很好的内置工具和出色的插件，让生活变得美妙，我没有使用过MS Edge，但IE开发人员的工具随着时间的推移越来越好了。）

如何使静态div占据页面的一半，高度为100％

4 个答案: