Question

当我在css中使用百分比时，如何让我的页面不调整大小？还有其他方法可以做到这一点吗？当页面调整大小时，Divs相互碰撞，图片被压扁。这是我的代码：

<!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);
});

Answer 1

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

Answer 2

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

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

这样，百分比基于静态值

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

2 个答案: