-4

检查此页面 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;}

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

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

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

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

#przedluzenie{width: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;}
#menu2{float: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;}

#oferta{background: 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_b{background: 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_b{background: 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;}

.minwebd{border: 1px solid #2e2e2e;float:left;position:relative;left:10px;}

.cien{display:block;height:28px;width:216px;float:left;margin-left:22px;}
#cienie{z-index:-1;float:right;position:relative;top:-8px;}

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


#footerx{float:right;margin:20px 0;width:412px;}
.stopka{float: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{}

#galgraf{margin-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;}
#wstep{float: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;
}

#webdopis{float:right;width: 430px; background: white;background: rgba(255, 255, 255, 0.7); display: block;margin: 0 0 15px 40px; padding:15px;color:#464646;}
#beczka{margin-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;
}

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

.ofertatxt{line-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;}
4

1 回答 1

0

您在 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 中，这些片段的完成顺序与在其他浏览器中不同，因此存在差异。

UPD #1

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

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

这是一个如何在纯 CSS 中进行垂直拉伸的示例：CSS 3 col 模板 100% 相同高度

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

于 2013-04-25T12:32:27.297 回答