时间戳

首页 > 解决方案 > 滚动条不显示所有内容

html - 滚动条不显示所有内容

问题描述

我是 HTML 和 CSS 的新手，试图通过使用 iframe 来复制更多 90 年代的 CSS 样式，用于我最近一直在工作的一个简单的测试站点。但是，我试图在 iframe 中显示的文本总是被截断，尽管滚动条被编码并且可见。滚动仅调整一小段距离，不允许您查看文本的全部内容。请指教。我确定我犯了一个简单的错误，您会在几秒钟内注意到，在此先感谢！

我的 html 索引（iframe 和 base）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
<title>Pen and Parchment</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
    <body>
<div id="mapp">
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://img.nickpic.host/5woiL6.png" usemap="#image-map">

<map name="image-map">
    <area target="_pnp" alt="my homepage" title="my homepage" href="/home.html" coords="616,500,655,507,683,513,688,494,639,481,610,476" shape="poly">
    <area target="_pnp" alt="about me" title="about me" href="/about.html" coords="600,535,648,535,683,545,695,526,637,515,611,511" shape="poly">
    <area target="_pnp" alt="who i'm showing off right now" title="who i'm showing off right now" href="/showing.html" coords="613,559,685,571,691,555,613,543" shape="poly">
    <area target="_pnp" alt="my whole crew" title="my whole crew" href="/crew.html" coords="608,588,680,597,677,581,607,567" shape="poly">
    <area target="_pnp" alt="what's coming next" title="what's coming next" href="/plans.html" coords="600,618,671,626,667,607,602,599" shape="poly">
    <area target="_pnp" alt="your way outta here" title="your way outta here" href="/links.html" coords="595,653,664,656,664,636,600,631" shape="poly">
</map>

<div id="cont"><iframe width="500px" height="260px" name="_pnp" frameborder="0" scrolling="auto" src="/home.html"></iframe></div>
<div id="bernard"><img src="https://img.nickpic.host/5wv65b.png"></div>

</div>
</div>
</body>
</html>

CSS


body {
  position:fixed;
  }
  
#mapp {
  width: 450px;
  height: 400px;
  position: relative;
  margin: auto;
  left: 0;
  right: 300px;
  top: 0;
  bottom: 0;
  z-index: 1;

  
  }
  
#cont {
  height: 250px;
  width: 500px;
  position: relative;
  margin: 10px;
  top: -630px;
  left: 150px;
  z-index: 2;
  overflow-y: scroll;
  overflow-x: clip;
  }
  
  #bernard {
  height: 245px;
  width: 196px;
  position: relative;
  margin: auto;
  top: -830px;
  left: 472px;
  z-index: 3;
    
    
  }
  
#text {font-size:12pt; color:#000; font-family: courier, serif; z-index: 10; padding-bottom: 10px; min-height:250px; height:100%}
#text img {max-width:500px;}
#text h1 {text-align:center;font-size:25pt;border-bottom:1px solid #819176;color:#a7b487;text-shadow:1px 1px 0px #819176;margin-top:-15px; letter-spacing:3px;}
#text h2 {font-weight:normal;text-align:center;font-size:20pt;letter-spacing:-1.5px;color:#8A906E;text-decoration:underline;}
#text a {text-decoration:none;color:#a7b487;}
#text a:hover {font-style:italic;}
#text b {font-size:10pt;letter-spacing:0.5px;}
#text i {font-size:12pt;}


::-webkit-scrollbar {
  width: 5px;
  }
  
::-webkit-scrollbar-track {
  background: #EFEFEC;
  }
  
::-webkit-scrollbar-thumb {
  background: #000;
  }

然后是我试图在主页上显示的 HTML（在 iframe 内）


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pen and Parchment</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <div id="text">
    <h1>W E L C O M E </h1>
<p> to <b>Pen and Parchment</b> a site catalogging the various pets and goings-on of various catz, dogz, horzes, and hexiez projects. I'm Ink - the proprietor and owner of PnP, and we're happy to have you here. As always, please excuse any construction mess. </p>
<center><p> Don't know what <a href="https://en.wikipedia.org/wiki/Petz">Petz</a> is? <br>
check out these resources and forums for more information! Welcome to the Petz Community<br>
<a href="http://petzforum.proboards.com/" target="_blank"><img src="https://i.ibb.co/BGMtdL9/petzforum-banner-tiny.gif"></a> <a href="http://whiskerwick.boards.net/" target="_blank" rel="noopener noreferrer"><img src="https://i.ibb.co/F3WSBCJ/wwbeach.gif"></a> <a href="https://www.petzuniversal.com/" target="_blank" rel="noopener noreferrer"><img src="https://i.ibb.co/kSZK6YJ/pugzlink.png"></a> <a href="http://seeingstars.boards.net/" target="_blank" rel="noopener noreferrer"><img src="https://i.ibb.co/b7YJbyz/sy-Sikuum-o.png"></a> <a href="http://petzkennelclub.co.uk/" target="_blank" rel="noopener noreferrer"><img src="https://i.ibb.co/JqMV9dr/23-PJyih-I-o.png"></a> <a href="https://tfm.petzcommunity.org/index.php?page=home" target="_blank" rel="noopener noreferrer"><img src="https://i.ibb.co/t8KHSWr/3-Ivdp-Oj-G-o.png"></a> <a href="https://discord.gg/f4SmVgh" target="_blank" rel="noopener noreferrer"><img src="https://i.ibb.co/q9mQ0YL/Petzcord.png"></a>

I don't play babyz myself, but if you think that might be your cup of tea, feel free to also check out:<br>
<a href="http://milkbc.proboards.com/" target="_blank" rel="noopener noreferrer"><img src="https://i.ibb.co/jzPHv27/1-UFYIsl0-o.png"></a><br>
for more information!</p></center>
<p>
<h2> recent updates:</h2>
<p><b>06.20.21</b> PnP is officially back up and running! While the dust settles, please excuse the site changing a fair bit. </p>

</div></div>
</html>

编辑：感谢您编辑我的语法，我猜对这个问题没有帮助...

标签： htmlcssiframe

解决方案

推荐阅读