停止使用百分比调整大小的CSS

当我在css中使用百分比时，如何让我的页面无法调整大小？有没有其他方法可以做到这一点？当页面大小调整时Div会相互碰撞并且图片会变形。这里是我的代码：停止使用百分比调整大小的CSS

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="StyleSheet" href="StyleSheets/StyleSheet.css" /> 
    <title>TeraShare</title> 
    <script type="text/javascript" src="JQuery/JQuery.js"></script> 
    <script type="text/javascript" src="Scripts/JavaScript.js"></script> 
</head> 
<body> 
    <div id="Container"> 
     <div id="Menu"> 
      <div id="Logo"><a href=""><img src="Pictures/Logo.png"></a></div> 
      <div id="Buttons"> 
       <a href="LogIn/"><div class="Button">LogIn</div></a> 
       <a href="Register/"><div class="Button">Register</div></a> 
      </div> 
     </div> 
     <div id="Wrap"> 
      <div id="Content"> 
       <div id="Slide"> 
        <div><img src="Pictures/Cloud1.jpg" class="Slide"></div> 
        <div><img src="Pictures/Cloud2.jpg" class="Slide"></div> 
        <div><img src="Pictures/Cloud3.jpg" class="Slide"></div> 
       </div> 
      </div> 
      <div id="Footer"> 
       <table> 
        <tr><td><h4 class="Text">Support</h4></td><td class="TD"><h4 class="Text">Legal</h4></td></tr> 
        <tr><td><a href="Contact.php" class="Link">Contact Us</a></td><td class="TD"><a href="Terms.html" class="Link">Terms of Service</a></td></tr> 
        <tr><td></td><td class="TD"><a href="Privacy.html" class="Link">Privacy Policy</a></td></tr> 
       </table> 
      </div> 
     </div> 
    </div> 
</body>

CSS：

body 
{ 
    padding:0px; 
    margin:0px; 
    overflow-x:hidden; 
    word-wrap:break-word; 
} 

img 
{ 
    border:none;  
} 

#Menu 
{ 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:49px; 
    border-bottom:rgba(82,82,82,1); 
    box-shadow:0 2px 3px rgba(182, 182, 182, 0.75); 
    background-color:rgb(68, 68, 68); 
    z-index:100; 
} 

#Container 
{ 
    padding:0px; 
    margin:0px; 
} 

#Content 
{ 
    width:100%; 
    height:auto; 
    background:url(../Pictures/Grid.gif); 
} 

#Footer 
{ 
    box-shadow: inset 0 20px 20px -20px #CCC; 
    box-sizing:border-box; 
    border-top:2px solid #666; 
    width:100%; 
    height:auto; 
    padding:20px; 
} 

#Wrap 
{ 
    position:absolute; 
    top:50px; 
    left:0px; 
    width:100%; 
    height:auto; 
} 

#Buttons 
{ 
    position:absolute; 
    right:20px; 
} 

#Logo 
{ 
    position:absolute; 
    top:0px; 
    left:20px; 
} 

.Slide 
{ 
    width:100%; 
    height:100%; 
    margin:0px; 
    padding:0px; 
    display:block; 
} 

.Button 
{ 
    margin-left:5px; 
    float:left; 
    line-height:20px; 
    padding:10px; 
    color:#FFF; 
    width:auto; 
    height:20px; 
    background-color:#347EBA; 
    font-family:arial; 
    font-size:14px; 
} 

.Button:hover 
{ 
    cursor:pointer; 
    background-color:#347EDA; 
} 

.Link 
{ 
    color:#666; 
    text-decoration:none; 
    font-size:13px; 
    font-family:Arial; 
    font-weight:bold; 
} 

.Link:hover 
{ 
    text-decoration:underline; 
} 

.Text 
{ 
    font-family:Arial; 
    font-weight:bold; 
    color:#333; 
} 

.TD 
{ 
    padding-left:30px; 
    padding-bottom:5px; 
}

JQuery的：

$(document).ready(function() 
{ 
    var Height = $(document).height(); 
    var Width = $(document).width(); 
    var BHeight = $('#Buttons').height(); 

    $('#Container').css({"height" : Height, "width" : Width}); 
    $('#MWrap').css({"left" : Width/2 - 956/2}); 
    $('#Buttons').css({"top" : 50/2 - BHeight/2}); 
    $('#Content').css({"height" : Height - 50}); 


    $("#Slide > div:gt(0)").hide(); 

    setInterval(function() { 
     $('#Slide > div:first') 
     .fadeOut(1000) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo('#Slide'); 
    }, 5000); 
});

来源

2013-02-15 Moussa Harajli

快速修复可能是将body的宽度设置为静态宽度。

body{ 
    width: 1000px; 
    margin: 0 auto; 
    position:relative; 
}

这样，你的百分比是基于静态值

来源

2013-02-15 22:21:11 Fresheyeball

那没有工作。 – 2013-02-15 22:39:24

我更新了我的答案。请给我一个去。 – Fresheyeball 2013-02-15 23:34:31

它的工作原理！谢谢你，你得到支票，但我不能upvote因为我没有足够的代表。几乎尽管。 – 2013-02-15 23:39:37

百分比是流动的。阻止它们重新调整大小的唯一方法是将min-width，max-width或特定像素值设置为有问题的元素或其父容器。

来源

2013-02-15 22:19:18

我心目中的唯一的事情是消除百分比和做他们在JQuery中，使它们的静态 – 2013-02-15 22:41:09

这样做砸了东西IM不知道为什么 – 2013-02-15 22:53:14

停止使用百分比调整大小的CSS

回答

相关问题