Fatal编程技术网
  • html/
  • Html 使用*页面级别*滚动条滚动DIV（其高度设置为可见区域）

Html 使用*页面级别*滚动条滚动DIV（其高度设置为可见区域）

html css

Html 使用*页面级别*滚动条滚动DIV（其高度设置为可见区域）,html,css,Html,Css,这是一张丑陋的图片，显示了我正在努力实现的目标。基本上，我需要使用页面滚动条来滚动DIV（其高度设置为可见区域） 这在纯html5/CSS中是否可能，如果可能的话，是如何实现的？有几种方法可以实现这一效果，因为您需要一个滚动div，这就是我要做的： CSS: HTML: 一些内容 按钮 实现此效果的另一种方法是为底部的制表符div提供一个固定位置。所以这可能看起来像： <div>Content Here. Lots perhaps.</div> <ul cla

这是一张丑陋的图片，显示了我正在努力实现的目标。基本上，我需要使用页面滚动条来滚动DIV（其高度设置为可见区域）

这在纯html5/CSS中是否可能，如果可能的话，是如何实现的？

有几种方法可以实现这一效果，因为您需要一个滚动div，这就是我要做的：

CSS:

HTML:

一些内容
按钮
实现此效果的另一种方法是为底部的制表符div提供一个固定位置。所以这可能看起来像：

<div>Content Here. Lots perhaps.</div>

<ul class="nav-tabs>
    <li>Tab 1</li>
    <li>Tab 2</li>
</ul>
试试这个。出现的滚动条是针对页面的，而不是您想要的div。基本上，如果你有足够的内容，页面的滚动条就会出现，就像你期望的任何页面一样。只是导航标签总是出现在页面的底部，不管你滚动到哪里。

用一堆固定位置的边框元素来构建你的div怎么样？大概是这样的：

<!-- don't forget to declare a doctype -->
<body>
    <!-- leave these empty -->
    <div id="frameTop"></div>
    <div id="frameBottom"></div>
    <div id="frameLeft"></div>
    <div id="frameRight"></div>

    <!-- put stuff in these -->
    <div id="top">Content here</div>
    <div id="content">
        <h3>Page title</h3>
        <p>Text here.</p>
    </div>
    <div id="bottom">Tabs</div>
</body>

<body>

    <div id="top">Content here</div>

    <div class="tab">
        <input type="radio" id="tab1" name="tab" class="radioTab" checked="checked" />
        <div class="content">
            <h3>Tab title</h3>
            <p>Text here.</p>
        </div>
        <label for="tab1">Tab 1</label>
    </div>

    <div class="tab">
        <input type="radio" id="tab2" name="tab" class="radioTab" />
        <div class="content">
            <h3>Tab title 2</h3>
            <p>Different text here.</p>
        </div>
        <label for="tab2">Tab 2</label>
    </div>

</body>


满足于此
页面标题
文本在这里

标签
将borderTop设置为具有底部边框样式，将borderBottom设置为具有顶部边框样式，然后将borderLeft和borderRight设置为纯色背景色以隐藏拐角处的边框线

编辑：I这可能更可取。HTML当然更干净了。不要对frameTop、frameBottom等使用空div，而是在body:before和body:after上使用css psuedo元素。然后，您的HTML看起来更像这样：

<!-- don't forget to declare a doctype -->
<body>
    <!-- leave these empty -->
    <div id="frameTop"></div>
    <div id="frameBottom"></div>
    <div id="frameLeft"></div>
    <div id="frameRight"></div>

    <!-- put stuff in these -->
    <div id="top">Content here</div>
    <div id="content">
        <h3>Page title</h3>
        <p>Text here.</p>
    </div>
    <div id="bottom">Tabs</div>
</body>

<body>

    <div id="top">Content here</div>

    <div class="tab">
        <input type="radio" id="tab1" name="tab" class="radioTab" checked="checked" />
        <div class="content">
            <h3>Tab title</h3>
            <p>Text here.</p>
        </div>
        <label for="tab1">Tab 1</label>
    </div>

    <div class="tab">
        <input type="radio" id="tab2" name="tab" class="radioTab" />
        <div class="content">
            <h3>Tab title 2</h3>
            <p>Different text here.</p>
        </div>
        <label for="tab2">Tab 2</label>
    </div>

</body>


满足于此
标签标题
文本在这里

表1
表标题2
这里有不同的文本

表2
对于使其工作的CSS。我在那把小提琴中的边距定义方面有点懒，但它足以证明概念。

我制作了一个更完整的JSFIDLE，它演示了如何伪造设计所需的边框

注意content div顶部和底部的额外填充，使用背景色和边框看起来内部框是它自己的区域。橙色边实际上与其余部分一起滚动，顶部和底部橙色部分附着到页眉和页脚

html, body{
background-color:orange;
margin:0;padding:0;
}

header{
position:fixed;
top:0;
width:100%;
background-color:orange;
}

footer{
position:fixed;
bottom:0;
width:100%;
background-color:orange;
}

header section, footer section{
background-color:#fff;
height:30px;
}

header .frame{
border-bottom:1px solid #222;
margin:0 30px 0 30px;
height:30px;
}

footer .frame{
border-top:1px solid #222;
margin:0 30px 0 30px;
height:30px;
}

.content{
background-color:#fff;
border-right:1px solid #222;
border-left:1px solid #222;
min-height:100%;
margin:0 30px 0 30px;
    padding:60px 24px;
}
编辑：刚刚注意到您的页脚有点不同，但您可以调整它以获得效果。

谢谢，但如屏幕截图所示，我希望使用/使用页面级滚动条，而不是特定于div的滚动条（我知道如何获得后期效果，但不是第一个）因此，您需要在div上使用
height:auto
，在nav上使用
position:fixed
。问题在于，从技术上讲，div大于视口。很抱歉，正如我在标题中所说，DIV的高度设置为可见区域（这是设计要求的一部分：（），所以我无法将其设置为自动。有什么方法可以实现这一点吗？从技术上讲，没有这些限制，没有办法做到这一点。但问题是，当div的宽度和高度为100%时，无法区分div滚动条和浏览器滚动条。因为浏览器滚动条基本上只是主体元素滚动。这正是我所做的。但是，如何使页面级滚动条接近（而不是通过玩css溢出来显示DIV级滚动条）？我也很抱歉。正如我在标题中所说，DIV的高度设置为可见区域（这是设计要求的一部分：（）），所以我不能将其设置为auto（隐式设置为AFAIK）这很好，你不需要将div设置为auto。这很好。只需在底部给它一个与nav元素高度相等的填充。 
html, body{
background-color:orange;
margin:0;padding:0;
}

header{
position:fixed;
top:0;
width:100%;
background-color:orange;
}

footer{
position:fixed;
bottom:0;
width:100%;
background-color:orange;
}

header section, footer section{
background-color:#fff;
height:30px;
}

header .frame{
border-bottom:1px solid #222;
margin:0 30px 0 30px;
height:30px;
}

footer .frame{
border-top:1px solid #222;
margin:0 30px 0 30px;
height:30px;
}

.content{
background-color:#fff;
border-right:1px solid #222;
border-left:1px solid #222;
min-height:100%;
margin:0 30px 0 30px;
    padding:60px 24px;
}