-1

How to make a z-index fit to page and not scalling i need to put it up from an svg, but my svg is in fit to page.

here is my div code

<div   id="homeScreen" class="grey_box"  style="background-color:#CDCDCD;
    position: absolute;
    left: 0px;
    top: 8px;
    width: 373px;
    height: 537px;
    visibility: visible;">
 <p class="hello" >E-Number<input id="tags" /></p>
<p class="hello2">Mat-Number<input id="tags1" /><p>
<p class="hello3">Tech. ID<input type="text"  name="fname"><p>
<p class="hello4">RIS<input type="text"  name="fname"><p>
<p class="hello5"> <button onclick="get_action_home()" style="width: 100px">Continue</button><p>
<p class="hello6">Βάση δεδομένων: Τοπικός</p> 
<p class="hello7">Σύνδεση: κομμένη</p> 
<p class="hello8">Κατάσταση βάσης δεδ.: Μη επίκαιρη</p> 

</div>

here is the javascript to put it dinamically 

function adjust()
{

            var DMMScreen = document.getElementById("DMM");
            //new screens dinamic 
            var homeScreen = document.getElementById("homeScreen");



            homeScreen.style.height = DMMScreen.getBoundingClientRect().height;
            homeScreen.style.width = DMMScreen.getBoundingClientRect().width;
            homeScreen.style.top = DMMScreen.getBoundingClientRect().top;
            homeScreen.style.left = DMMScreen.getBoundingClientRect().left;
            //

and here is what i found from jquery but i don't know how to fix it

$(window).resize(function() {
    $("#width").text($(this).width());
    $("#height").text($(this).height());
});

and here is the link for what it does [link] (https://www.dropbox.com/s/ebsha1t091ewk40/good2.png) and here is the bad when i change the window [link] (https://www.dropbox.com/s/b7n4nn3gg2gb6fn/good.png)

4

1 回答 1

1

z-index不适合任何东西，它是一个“分层”工具，允许您将元素放在彼此之上，我假设您的意思是您有一个position:fixedorposition:absolute与z-index.. 如果是这种情况，您可以使元素适合通过使用页面宽度width:100%;

例如：

<style>
.full_width {
    top:0;
    left:0;
    z-index:1;
    height:20%;
    width:100%;
    position:fixed;
    text-align:center;
}
</style>
</head>
<body>
    <div class="full_width"> i will fit the width of the page</div>

    your other stuff here...
</body>

如果这不是你的意思，那么请提供更多信息..

编辑 您提供的链接，您不需要使用position或z-index，

这将像设置你的margin-leftand margin-righttoauto并将该容器定义为width..

将该页面的 HTML 和 CSS 粘贴到您的问题中，我们可以为您提供更多帮助

但就目前而言，将那个框放在页面中间的一个例子是

<style>
.grey_box {
    width:500px;
    height:600px;
    margin-left:auto;
    margin-right:auto;
    background-color:#CCC;
}
</style>
<div class="grey_box">
 <!-- your content here-->
</div>

示例：http: //jsfiddle.net/AbQsa/

于 2013-04-24T10:15:33.177 回答