为啥 Chrome 上的页面更长？ [关闭]

Posted 2023-03-06

技术标签:

【中文标题】为啥 Chrome 上的页面更长？ [关闭]【英文标题】：Why the page is longer on Chrome? [closed]为什么 Chrome 上的页面更长？ [关闭] 【发布时间】：2013-04-19 06:56:09 【问题描述】：

查看此页面 www.danielmalek.bugs3.com/oferta.html，在 Chrome 上您可以看到它有点太长，因此左侧的梁没有到达站点的末端。在 Firefox 和 IE 上似乎是正确的，在 localhost Chrome 也显示良好。

HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

  <title>Strony internetowe - Daniel Małek</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link href="style.css" type="text/css" rel="stylesheet" />  
<script language="javascript" type="text/javascript" src="jQuery.js"></script>

<script type="text/javascript">

$(document).ready(function ()
/*$("body").css("overflow-y", "hidden");*/
        /*("#slider").css("overflow", "hidden");*/
    function tytul() 
   

        $(".galeria").click(
        function()
        
            $("#ukryte").toggle(200);
        );
);
</script>
</head>

<body>
<div id="container">

    <div id="header">
        <div id="header2"></div>
        <div id="pasek"></div>
    </div>
    <div id="przedluzenie"></div>
    <div id="content">
        <div id="menu">
        <div id="menu2">
            <a class="start" href="index.html"></a>
            <a class="galeria" href="#"></a>
                <div id="ukryte" style="display: none;">
                <a class="webdesign"  href="webdesign.html"></a>
                <a class="grafika"  href="grafika.html"></a>
                </div>
            <div id="oferta_b"></div>
            <a class="omnie" href="omnie.html"></a>
            <a class="kontakt" href="kontakt.html"></a>
        </div>
        </div>

    <div id="prawa_strona">
<div id="omnietxt" style="margin-bottom:60px;">
<ul style="margin-left:20px;" class="ofertatxt">
<li>Administracja istniejącymi stronami internetowymi</li>
<li>Hosting, domeny i instalacja stron na serwerze</li>
<li>Projektowanie i kodowanie stron www</li>
<li>Identyfikacja wizualna (tworzenie logo)</li>
<li>Dedykowane systemy CMS</li>
<li>Blogi Wordpress</li>
<li>Oprogramowanie sklepów KQSStore</li>
</ul>
</br>
<p class="ofertatxt">
Ponadto, wraz ze znajomymi programistami tworzymy młody, ambitny zespół, który jest w stanie stworzyć w pełni funkcjonalne i rozbudowane serwisy internetowe.</br></br>
Nie wystawiam faktury VAT, preferowany rodzaj współpracy to umowa o zlecenie lub umowa o dzieło.</p>
</div>
    <div id="footerx">
        <img src="img/foot_linia.png"></img><br>
         <p class="stopka">Copyright © 2013 Daniel Małek </p>
    </div>
    </div>

    <div class="clear"></div>

    </div>
</div>

<script type="text/javascript" charset="utf-8">
    var scrollSpeed = 70;
    var step = 1;
    var current = 0;
    var imageWidth = 410;
    var headerWidth = 410;      

    var restartPosition = -(imageWidth - headerWidth);

    function scrollBg()
        current -= step;
        if (current == restartPosition)
            current = 0;
        

        $('#header').css("background-position",current+"px 0");
    

    var init = setInterval("scrollBg()", scrollSpeed);
</script>

<script type="text/javascript" charset="utf-8">
$(window).load(function()
var content = $('#content').height();
var winh = $(window).height();
if(content>=winh)$('#menu').height(content);
else
    winh=winh-200;
    $('#menu').height(winh);
);
</script>

</body>
</html>

还有 CSS：

    *   padding: 0;  margin: 0;
.clear clear: both;
html
html, body, #container, #content
body background: url('img/tekstura.png');background-repeat:repeat-y repeat-x;background-color:#d5d5d5;
#container margin: 0 auto;  position:relative;

#content margin: 0 auto;position:relative;width:960px;overflow:auto;

#header background-color:#2099c8;background: url('img/heder/tekstura.png') repeat-x;  height:160px;  margin:0 auto;  position:relative;  width:100%;box-shadow: 0 0 30px 9px white;

#pasekheight:3px;background: url('img/heder/pasek.png') repeat-x;

#header2background: url('img/heder/przod2.png') no-repeat;background-repeat:repeat-y repeat-x;margin: 0 auto;width:960px;  height:157px;

#gradient_poziomheight:37px; background: url('img/gradient_poziom.png') repeat-x;

#prawa_strona float:right;width:720px; margin-right:10px;

#przedluzeniewidth:209px; height:40px;background-color:black;margin:0 auto;position:relative;right:376px;background: url('img/gradient_pion.png') repeat-y;
#menu float:left;width:209px;margin-right:5px;background: url('img/gradient_pion.png') repeat-y;
#menu2float:right;margin-right:20px;

#ukryte position:relative;left:23px;

#start_b background: url('img/start_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;
.start background:url('img/start.png') no-repeat;display:block;height:29px;width:169px;margin-bottom:15px;
a.start:hover background-position: 0px -29px;

#galeria_b background: url('img/galeria_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;
a.galeria background: url('img/galeria.png') no-repeat;display:block;height:29px;overflow:hidden;width: 169px;margin-bottom:15px;
a.galeria:hover background-position: 0px -29px;

#webdesign_b background: url('img/webdesign_b.png') no-repeat;height:20px;width: 142px;margin-bottom:15px;
a.webdesign background: url('img/webdesign.png') no-repeat;display:block;height:20px;overflow:hidden;width: 169px;margin-bottom:15px;
a.webdesign:hover background-position: 0px -20px;

#grafika_b background: url('img/grafika_b.png') no-repeat;height:20px;width: 142px;margin-bottom:15px;
a.grafika background: url('img/grafika.png') no-repeat;display:block;height:20px;overflow:hidden;width: 169px;margin-bottom:25px;
a.grafika:hover background-position: 0px -20px;

#ofertabackground: url('img/oferta_b.png') no-repeat;height:29px;width: 142px;margin-bottom:15px;
a.oferta background: url('img/oferta.png') no-repeat;display:block;height:29px;width: 142px;margin-bottom:15px;
a.oferta:hover background-position: 0px -29px;

#omnie_bbackground: url('img/omnie_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;
a.omnie background: url('img/omnie.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;
a.omnie:hover background-position: 0px -29px;

#oferta_bbackground: url('img/oferta_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;
a.oferta background: url('img/oferta.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;
a.oferta:hover background-position: 0px -29px;

#kontakt_b background: url('img/kontakt_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;
a.kontakt background: url('img/kontakt.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;
a.kontakt:hover background-position: 0px -29px;

.minwebdborder: 1px solid #2e2e2e;float:left;position:relative;left:10px;

.ciendisplay:block;height:28px;width:216px;float:left;margin-left:22px;
#cieniez-index:-1;float:right;position:relative;top:-8px;

#jrsmargin-top:25px;float:right;margin-left:7px;
.jrsbackground: rgba(255, 255, 255, 0.7);width:218px;float:left;
.jrs_img
.jrs_tekstmargin: 0 10px 15px 10px; text-align:justify;color:#464646;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:12px;
.znak_plusposition:relative;float:left;width:20px;font-size:20px;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;margin-top:15px;text-align:center;color:#3f3f3f;


#footerxfloat:right;margin:20px 0;width:412px;
.stopkafloat:right;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:0.6em;color:#2e2e2e;position:relative;margin-right:10px;margin-top:5px;

.obrazek1
height:159px;
width: 198px;
float:left;
border: 1px solid #417f99;


.obrazek2

#galgrafmargin-right:30px;float:left;
#napis width:190px;float:right;height:35px;background: white;background: rgba(255, 255, 255, 0.7); display: block; padding: 5px ;  margin: 0 0 20px 20px;
#wstepfloat:left; position:relative; width:auto;  background: white; background: rgba(255, 255, 255, 0.7);margin: 0 0 30px 66px; padding:10px 15px 10px 15px;color:#464646;

#gallery
float:right;


#gallery2
float:left;
width:200px;


#webdopisy
float:left;


#webdopisfloat:right;width: 430px; background: white;background: rgba(255, 255, 255, 0.7); display: block;margin: 0 0 15px 40px; padding:15px;color:#464646;
#beczkamargin-bottom:30px;position:relative;float:left;
.webdopis 

.opis a 
text-decoration:none;
color:#006c96;


.opis a:hover
text-decoration:underline;
color:#006c96;

h1 
color:black;
font-size:0.9em;
font-family:tahoma,Helvetica,sans-serif;
font-weight:100;
text-align:center;


.omnietxtline-height:20px;color:#464646;font-size:0.9em;float:left;font-family:arial,Helvetica,sans-serif;padding: 0 5px 0 5px;

.ofertatxtline-height:20px;color:#464646;font-size:0.9em;font-family:arial,Helvetica,sans-serif;text-align:justify

#omnietxt
  float:left;
  width: 500px;
  background: white;
  background: rgba(255, 255, 255, 0.7); 
  display: block;
  padding:15px 15px 15px 15px;
  margin: 0 0 110px 120px;


#wysokosc
height:420px;


/* LAJTBOKS */

.thumb 
float:left;
margin: 0 0 0 20px ;
border: 1px solid #2e2e2e;
  

 .clearFloat 
  clear:both;
  

/* KONTAKT */

#numery  padding:20px 20px 20px 20px;float:left;position:relative;left:265px;background: rgba(255, 255, 255, 0.7);   margin-top:15px;margin-bottom:150px;

.gg1 position:relative;top:2px;left: 13px;

.gg2 font-style:italic;font-size:1.2em;position:relative;top:5px;left:15px;
.adres1 color:#015d81;font-size:15;font-family:Arial,Helvetica,sans-serif;
.adres2 position:relative;top:5px;color:#015d81;font-size:15;font-family:Arial,Helvetica,sans-serif;

【问题讨论】：

您能在此处添加有问题的代码，或许还可以添加屏幕截图。这样，当您将来对您的网站进行更改时，该问题仍然具有相关性。 Something on my web site doesn't work. Can I just paste a link to it? Chrome 27的free-hoster通知在哪里？我不认为这取决于主机，只是检查了另一个 id，它仍然很糟糕 【参考方案1】：

您在 HTML 中嵌入了两个脚本：

<script type="text/javascript" charset="utf-8">
  $(window).load(function()
    var content = $('#content').height();
    var winh = $(window).height();
    if(content>=winh)$('#menu').height(content);
    else
      winh=winh-200;
      $('#menu').height(winh);
  );
</script>

<script type="text/javascript" charset="utf-8">
  $(window).load(function()
    var content = $('#content').height();
    $('#menu').height(content);
  );
</script>

两者同时开火：$(window).load，并且两者都做同样的事情：$('#menu').height(value);，但值不同。

显然，这是错误的。可能在 Chrome 中，这些 sn-ps 的完成顺序与其他浏览器不同，因此有所不同。

UPD #1

我现在正在使用 Chrome 打开您的链接，但没有出现垂直滚动条。我认为我的解决方案有效，请不要忘记接受这个问题。 ;)

但是你知道你不需要 Javascript 来解决这个任务吗？

这是一个如何在纯 CSS 中进行垂直拉伸的示例：CSS 3 col template 100% same height

此外，您不应使用非语义元素进行装饰：#przedluzenie、#pasek 等。这也可以在纯 CSS 中解决，而不会弄乱您的 HTML。

【讨论】：

修复了，还是一样更新了我的答案，请看一下。我仍然显示滚动条...现在尝试使用 css3 解决它，也许它会有所帮助。 “接受问题”是什么意思？这是您修改后的页面在 Chrome 中的外观：i.imgur.com/xDXHdEX.jpg 没有滚动条。我认为你的问题已经解决了。如果您同意，请点击我的答案左上角的勾号图标。我刚刚告诉我朋友打开页面，他的电脑看起来也不错，看来我的软件有问题:) 谢谢你的帮助:)

以上是关于为啥 Chrome 上的页面更长？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章

为啥从组合框进行选择后切换图形需要更长的时间？

为啥页面宽度大于屏幕宽度？ [关闭]

为啥我的网站在其他浏览器上看起来不太好？ [关闭]

chrome怎么调试关闭的页面？

为啥我的移动版网站上出现笑脸和空白？ [关闭]

在 chrome 中检查 jquery [关闭]