个人中心
gpt4 book ai didi

css - 带或不带div的html5定位

转载 作者：行者123 更新时间：2023-11-28 12:39:34 25 4
gpt4 key购买 nike

我想知道this site url的演示索引页是否，我可以防止文本溢出或者说当文本越过蓝色框底部时使用可选的滚动条？我希望布局类似于 this 'production' site (使用服务器统计访问)。

我可以使用 html 5 执行此操作吗？我是否应该包含 div 以限制特定屏幕分辨率下的文本溢出。请找到使用的 html 和样式表代码(感谢此设计的作者以及 Aayushi Jain，他帮助我从本网站的另一个问题中调整了一些样式表)。

样式表

 html { 
   overflow-y: scroll; } 

 div#wrapper {
   width:90%; 
   margin: 10px auto; 
   position: relative;}

 header#site {
     height:80px;
     padding:10px;
     background-color:#0033FF;
     margin:10px 0px;
     text-align:center; } 

 footer {
     font-size:0.8em;
     clear:both;}

 footer .col {
     width:30%;
     margin:1% 1.1%;
     padding:2px;
     height:100px;
     background-color:#F63;
     float:left; }


 nav {
     background-color:#0033FF;
     position: absolute;
     left: 0;
     bottom: 0;
     top: 110px;
     width: 29%; }


 nav ul {
     list-style:none;}


 nav ul li a {  
     display: block;  
     background-color:#CCC;
     margin-right: 20px;  
     width: 110px;  
     line-height:1.5em;  
     text-align: center;  
     text-decoration: none;  
     color: #000;   }  

 nav ul li a:hover {  
         color: #fff;  
         background-color:#39C; }  

 article {
     background-color:#0066FF;
     float:right;
     width:69%;
     margin-right:10px;
     height:50%;
     overflow-y:scroll;
      }

 article header {
     background-color:#F90;
     padding:15px; }

 section#abstract {
     font-size:1.09em;
     font-style:italic;
     margin:10px 0px;
     text-align:justify;
     padding:5px 80px; }

section#main {
     font-size:1em;
     padding:20px;
     text-align:justify;  
     float: left;   
     margin: 0;   
     padding: 0;   
     display: inline; }

 .ads {
     height:50%;
     width:30%;
     background-color:#0033FF;
     margin-bottom:1%;
     float:left;}

 .ads p:first-child {
     padding:15px; 
     font-size:2em;}

 .ads p:last-child {
     padding-left:15px; 
     font-size:1em;color:#CCC;}

html文件

   <!DOCTYPE html>
<!-- saved from url=(0064)http://toytic.com/class/examples/e808_html5_Header2NavAside.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Web site</title>
<link href="style.css" rel="stylesheet" />
<style>

</style>

<!-- Tell IE we are using html5 + CSS -->
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>
<body>
<div id="wrapper">
    <header id="site"> 
        <h1>WEBSITE</h1>
    </header>

    <article>  
        <header>
            <h2>This is the article header</h2>
            <time datetime="25-11-2010" pubdate="">25th November 2010</time>
        </header>
        <section id="abstract">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et orci sed neque tincidunt dictum nec at lacus. Fusce feugiat sagittis ligula ac aliquam. Integer ut sodales justo. Etiam ultrices cursus iaculis. Suspendisse bibendum. </p>
        </section>
        <section id="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac velit mauris. Nulla cursus pretium dapibus. Fusce at faucibus mi. Etiam ac nisi condimentum quam vulputate euismod. Nunc viverra consectetur tempor. Praesent rutrum diam in leo lacinia sit amet volutpat leo tempus. Donec sodales, velit et viverra imperdiet, velit leo placerat libero, fringilla scelerisque justo sapien sit amet sapien. Donec blandit tellus at mi hendrerit hendrerit. Sed suscipit sagittis sodales. Etiam sagittis, tortor quis sagittis laoreet, erat nibh mollis sem, ut tristique felis augue non metus. </p>
            <p>Etiam in gravida mi. Maecenas placerat, justo vel gravida egestas, odio sem dictum justo, eget volutpat massa augue in augue. Sed tempus sem a nulla eleifend aliquet aliquet diam pharetra. Proin sit amet imperdiet est. Cras vitae felis in nulla tristique porttitor ut sit amet neque. Quisque sed nisi quam. Aliquam erat volutpat. Nullam dignissim augue odio. Nam sit amet ipsum arcu, id rutrum felis. Phasellus velit mauris, dictum eget tincidunt eget, condimentum eget risus. Proin nibh nulla, sagittis et feugiat in, luctus quis velit. Aenean lobortis mi ut odio accumsan adipiscing. Nulla quis ipsum magna. Suspendisse auctor mauris eu mi cursus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida vulputate leo, consectetur porta sem euismod nec. Donec et dolor lectus, vel cursus massa. Morbi eu dictum arcu. Fusce luctus porttitor neque, sed eleifend orci tristique convallis. </p>
        </section>
    </article>

   <nav>
    <ul>
      <li>About</li>
      <li>Service</li>
      <li>Contact</li>
    </ul>
  </nav>

    <footer> 
        <div class="col">
            <h4>Contact</h4>
            <adress>
                <p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Janet Griffith</a> from Public Relations</p>
                <p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Jil Sanders</a>, webmaster</p>

        </adress></div>
        <div class="col">
            <h4>Sites of interest</h4>
            <aside>
                <p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Site A</a></p>
                <p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Another one</a></p>
            </aside>
        </div>
        <div class="col">
            <h4>Legal stuff</h4>
            <p>Copyright</p>
            <p>Terms of Service</p>
        </div>
    </footer>
    </div>


</body></html>

谢谢

帕斯卡

最佳答案

如果您不想看到滚动条，请使用 overflow: hidden 或 overflow: auto。

现在，如果您希望 header 部分是静态的，则将您的主要部分和抽象部分放在一个 div 中，并使其 height: 500px(或您想要的东西) 但使其固定，然后使用 overflow: hidden 如果你不想显示溢出部分或者使用 overflow: auto 如果你想显示溢出部分而不是滚动条.

关于css - 带或不带div的html5定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17767128/

25 4 0
文章推荐： css - 如何用你自己的 css 覆盖 cloudmade maps css？
文章推荐： ios - 为什么我的 Tableview 重复使用了一些单元格？
文章推荐： css - 修复新闻标题标题/图片
文章推荐： css - 将 div 定位在具有响应高度的绝对定位的 div 下
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com