css - 在 HTML5 中使部分大小正确

标签 css html

我正在学习 HTML5。我正在尝试在浏览器中创建一个特定大小的部分,并根据按下的按钮将按钮文本等内容放置在其中。问题是我似乎无法使该部分小于屏幕或在标题下方开始一个设定量,以便在它周围一直有一个“边界”显示背景图像。这是我的 HTML5

    <body>
<header>
    <nav id="nav1">
        <button id="b1"> Goals </button>
        <button id="b2"> Habits </button>
        <button id="b3"> Diary </button>
    </nav>
</header>
<section id="goals">

</section>

这是我为该部分准备的 CSS

   section
   {
height: 700px;
background-color:blue; 
overflow:auto;
top:50px;
transform:translateY(20px);

   }

最佳答案

http://jsfiddle.net/wcpkM/

请参阅此 Fiddle,另请参阅@TylerH 评论。

使用时

top: 50px;

像您一样,您需要position:absolute、相对或固定。 除非绝对必要,否则不建议这样做。

关于css - 在 HTML5 中使部分大小正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23085305/

相关文章:

css - 如何改变字的颜色?

css - 在 div 的右边缘附近放置超链接

html - 图像上的 CSS 叠加

html - 基于 css 媒体查询重新调整 DIV 的显示顺序?

html - CSS Form下划线文本域动画效果

html - 如何正确放置旋转文本?

javascript - 用 LESS 伪造一个 css 属性(并在解析时用真实属性替换它)

html - margin 顶部移动我所有的内容

javascript - refresh_ce 的含义和来源

html - Bootstrap 样式未在 asp.net gridview 中呈现并显示其他一些类