当前位置： 文江博客话题详情

CSS 问题 - 我希望客户区完全填满

发布于 2024-12-10 06:57:49 字数 10175 浏览 0 评论 0原文

我真的很挣扎于CSS。我正在尝试修改一种滑动门技术，打开一个完整的客户区 div，但我就是无法让整个客户区填满。我从这里进行修改：

http://web.enavu.com/ tutorials/sliding-door-effect-with-jquery/

这是代码：

<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<style type='text/css'>    
    .box_container{
        position:relative; /* important */
        width:100%; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
        height:100%; /* important */
        /*min-width: 100%;*/
        /*min-height: 100%;*/
        overflow:hidden; /* hide the content that goes out of the div */
        /*just styling bellow*/
        background: black;
        color:white;
    }
    .images_holder
    {
        width: 100%;
        height: 100%;
        position:absolute; /* this is important, so the div is positioned on top of the text */
    }
    .image_div {
        position:relative; /* important so we can work with the left or right indent */
        overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
        width:50%; /* make it 50% of the whole images_holder */
        height: 100%;
        float:left; /* make then inline */
    }
    .right img{
        margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
    }
    .clear{
        clear:both;    
    }
</style>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
    $(document).ready(function () {
        var cv, box, holder, cvContext, width, height, my_gradient, boxHeight, boxWidth;

        //        box = document.getElementById("box");
        //        boxWidth = box.offsetWidth;
        //        boxHeight = box.offsetHeight;

        //        holder = document.getElementById("imageHolder");
        //        holder.width = boxWidth;
        //        holder.hieght = boxHeight;

        box = document.getElementById("box");
        //$("box").css({ width: $(window).width(), height: $(window).height() });
        $("box").css({ width: window.innerWidth, height: window.innerHeight });
        $("imageHolder").css({ 'min-width': window.innerWidth, 'min-height': window.innerHeight });

        cv = document.getElementById("canvas1");
        width = cv.width;
        height = cv.height;
        cvContext = cv.getContext("2d");
        my_gradient = cvContext.createLinearGradient(0, 0, width, height);
        my_gradient.addColorStop(0, "blue");
        my_gradient.addColorStop(1, "white");
        cvContext.fillStyle = my_gradient;
        cvContext.fillRect(0, 0, width, height);

        cv = document.getElementById("canvas2");
        width = cv.width;
        height = cv.height;
        cvContext = cv.getContext("2d");
        my_gradient = cvContext.createLinearGradient(0, 0, width, height);
        my_gradient.addColorStop(0, "blue");
        my_gradient.addColorStop(1, "white");
        cvContext.fillStyle = my_gradient;
        cvContext.fillRect(0, 0, width, height);

        //when the user hovers over the div that contains our html...
        $('.box_container').hover(function () {
            //... we get the width of the div and split it by 2  ...
            var width = $(this).outerWidth() / 2;
            /*... and using that width we move the left "part" of the image to left and right "part"
            to right by changing it's indent from left side or right side... */
            $(this).find('.left').animate({ right: width }, { queue: false, duration: 300 });
            $(this).find('.right').animate({ left: width }, { queue: false, duration: 300 });
        }, function () {
            //... and when he hovers out we get the images back to their's starting position using the same function... '
            $(this).find('.left').animate({ right: 0 }, { queue: false, duration: 300 });
            $(this).find('.right').animate({ left: 0 }, { queue: false, duration: 300 });
            //... close it and that's it
        });
    });
</script>
</head>
<body>
<!--START THE MAIN CONTAINER-->
<div id="box" class='box_container'>

        <!--START THE IMAGE PARTS HOLDER-->
        <div id="imageHolder" class='images_holder'>

            <!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION-->
            <div class='image_div left'><canvas id="canvas1" style="width:100%; height:100%;"/></div>
            <div class='image_div right'><canvas id="canvas2" style="width:100%; height:100%;"/></div>

            <!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW-->
            <div class='clear'></div>

        </div>
        <!--END THE IMAGE PARTS HOLDER-->

        <!--START THE TEXT-->
        The text underneath
        <!--END THE TEXT-->
</div>
<!--END THE MAIN CONTAINER-->  

</body>
</html>

如何让面板覆盖屏幕的整个客户区域，而不是小细条？

好吧，我已经尝试简化并删除所有 CSS，所以一切都在代码后面完成。我正在按照建议使用视口。但似乎没有任何作用。事实上，它甚至不再识别悬停。

我做错了什么？为什么我似乎无法在加载时更改任何宽度、高度等？为什么我的悬停停止工作？

请帮忙。

<!DOCTYPE HTML>
<!--Note this doctype is essential to recognise canvas-->
<html>
<head>
<title>Dual sliding door effect with one Image</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
    function MyOnLoad() {
        var cvContext, my_gradient;
        var width, height, widthWin, heightWin, widthDoc, heightDoc, widthMain;
        var divBox = document.getElementById('divBox');
        var divHolder = document.getElementById("divHolder");
        var divUnderneath = document.getElementById("divUnderneath");
        var divDoorLeft = document.getElementById("divDoorLeft");
        var divDoorRight = document.getElementById("divDoorRight");
        var canvas1 = document.getElementById("canvas1");
        var canvas2 = document.getElementById("canvas2");

        widthWin = $(window).width();   // returns width of browser viewport
        heightWin = $(window).height();   // returns width of browser viewport
        widthDoc = $(document).width(); // returns width of HTML document
        heightDoc = $(document).height(); // returns width of HTML document

        width = widthWin;
        height = heightWin;

        divBox.style.width = width;
        divBox.style.height = height;
        divBox.style.background = "#AAFFAA";
        divBox.style.position = "relative";
        divBox.style.overflow = "hidden";
        divBox.style.color  = "#FFFFFF";

        divHolder.style.width = width;
        divHolder.style.height = height;
        divHolder.style.background = "#AAAAFF";
        divHolder.style.position = "absolute";

        divUnderneath.style.width = width;
        divUnderneath.style.height = height;
        divUnderneath.style.background = "#FFAAAA";

        divDoorLeft.style.position = "relative";
        divDoorLeft.style.overflow = "hidden";
        divDoorLeft.style.width = Math.round(0.5 * width);
        divDoorLeft.style.height = height;
        divDoorLeft.style.float = "left";

        divDoorRight.style.position = "relative";
        divDoorRight.style.overflow = "hidden";
        divDoorRight.style.width = Math.round(0.5 * width);
        divDoorRight.style.height = height;
        divDoorRight.style.float = "left";
        divDoorRight.style.marginLeft = -width;

        canvas1.width = Math.round(0.5 * width);
        canvas1.height = height;
        cvContext = canvas1.getContext("2d");
        my_gradient = cvContext.createLinearGradient(0, 0, canvas1.width, canvas1.height);
        my_gradient.addColorStop(0, "blue");
        my_gradient.addColorStop(1, "white");
        cvContext.fillStyle = my_gradient;
        cvContext.fillRect(0, 0, canvas1.width, canvas1.height);

        canvas2.width = Math.round(0.5 * width);
        canvas2.height = height;
        cvContext = canvas2.getContext("2d");
        my_gradient = cvContext.createLinearGradient(0, 0, canvas2.width, canvas2.height);
        my_gradient.addColorStop(0, "blue");
        my_gradient.addColorStop(1, "white");
        cvContext.fillStyle = my_gradient;
        cvContext.fillRect(0, 0, canvas2.width, canvas2.height);

        //when the user hovers over the div that contains our html...
        var d = $("divBox");
        $("divBox").hover(function () {
            //... we get the width of the div and split it by 2  ...
            var width = $(this).outerWidth() / 2;
            /*... and using that width we move the left "part" of the image to left and right "part"
            to right by changing it's indent from left side or right side... */
            $(this).find('divDoorLeft').animate({ right: width }, { queue: false, duration: 300 });
            $(this).find('divDoorRight').animate({ left: width }, { queue: false, duration: 300 });
        }, function () {
            //... and when he hovers out we get the images back to their's starting position using the same function... '
            $(this).find('divDoorLeft').animate({ right: 0 }, { queue: false, duration: 300 });
            $(this).find('divDoorRight').animate({ left: 0 }, { queue: false, duration: 300 });
            //... close it and that's it
        });
    }
</script>
</head>

<body onload="MyOnLoad()" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#FF0000">
<div id="divBox">        
        <div id="divHolder">
            <div id="divDoorLeft"><canvas id="canvas1"/></div>
            <div id="divDoorRight"><canvas id="canvas2"/></div>

        </div>
        <div id="divUnderneath">
            Looks nice doesn't it :)
        </div>
</div>
</body>
</html>
原文

I really struggle with CSS. I am trying mod a sliding door technique that opens onto a full-client area div, but I just cannot get the full client area filled up. I am modding from here:

http://web.enavu.com/tutorials/sliding-door-effect-with-jquery/

Here is the code:

<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<style type='text/css'>    
    .box_container{
        position:relative; /* important */
        width:100%; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
        height:100%; /* important */
        /*min-width: 100%;*/
        /*min-height: 100%;*/
        overflow:hidden; /* hide the content that goes out of the div */
        /*just styling bellow*/
        background: black;
        color:white;
    }
    .images_holder
    {
        width: 100%;
        height: 100%;
        position:absolute; /* this is important, so the div is positioned on top of the text */
    }
    .image_div {
        position:relative; /* important so we can work with the left or right indent */
        overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
        width:50%; /* make it 50% of the whole images_holder */
        height: 100%;
        float:left; /* make then inline */
    }
    .right img{
        margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
    }
    .clear{
        clear:both;    
    }
</style>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
    $(document).ready(function () {
        var cv, box, holder, cvContext, width, height, my_gradient, boxHeight, boxWidth;

        //        box = document.getElementById("box");
        //        boxWidth = box.offsetWidth;
        //        boxHeight = box.offsetHeight;

        //        holder = document.getElementById("imageHolder");
        //        holder.width = boxWidth;
        //        holder.hieght = boxHeight;

        box = document.getElementById("box");
        //$("box").css({ width: $(window).width(), height: $(window).height() });
        $("box").css({ width: window.innerWidth, height: window.innerHeight });
        $("imageHolder").css({ 'min-width': window.innerWidth, 'min-height': window.innerHeight });

        cv = document.getElementById("canvas1");
        width = cv.width;
        height = cv.height;
        cvContext = cv.getContext("2d");
        my_gradient = cvContext.createLinearGradient(0, 0, width, height);
        my_gradient.addColorStop(0, "blue");
        my_gradient.addColorStop(1, "white");
        cvContext.fillStyle = my_gradient;
        cvContext.fillRect(0, 0, width, height);

        cv = document.getElementById("canvas2");
        width = cv.width;
        height = cv.height;
        cvContext = cv.getContext("2d");
        my_gradient = cvContext.createLinearGradient(0, 0, width, height);
        my_gradient.addColorStop(0, "blue");
        my_gradient.addColorStop(1, "white");
        cvContext.fillStyle = my_gradient;
        cvContext.fillRect(0, 0, width, height);

        //when the user hovers over the div that contains our html...
        $('.box_container').hover(function () {
            //... we get the width of the div and split it by 2  ...
            var width = $(this).outerWidth() / 2;
            /*... and using that width we move the left "part" of the image to left and right "part"
            to right by changing it's indent from left side or right side... */
            $(this).find('.left').animate({ right: width }, { queue: false, duration: 300 });
            $(this).find('.right').animate({ left: width }, { queue: false, duration: 300 });
        }, function () {
            //... and when he hovers out we get the images back to their's starting position using the same function... '
            $(this).find('.left').animate({ right: 0 }, { queue: false, duration: 300 });
            $(this).find('.right').animate({ left: 0 }, { queue: false, duration: 300 });
            //... close it and that's it
        });
    });
</script>
</head>
<body>
<!--START THE MAIN CONTAINER-->
<div id="box" class='box_container'>

        <!--START THE IMAGE PARTS HOLDER-->
        <div id="imageHolder" class='images_holder'>

            <!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION-->
            <div class='image_div left'><canvas id="canvas1" style="width:100%; height:100%;"/></div>
            <div class='image_div right'><canvas id="canvas2" style="width:100%; height:100%;"/></div>

            <!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW-->
            <div class='clear'></div>

        </div>
        <!--END THE IMAGE PARTS HOLDER-->

        <!--START THE TEXT-->
        The text underneath
        <!--END THE TEXT-->
</div>
<!--END THE MAIN CONTAINER-->  

</body>
</html>

Instead of the small thin strip, how can I get the panels covering the entire client area of the screen?

OK, I have tried to simplify, and remove all css, so everything is done in code behind. I am using the viewport as suggested. But nothing seems to work. In fact it does not even recognise the hover anymore.

What am I doing wrong? Why can't I seem to change any widths, heights etc onload? Why has my hover stopped working?

Please help.

<!DOCTYPE HTML>
<!--Note this doctype is essential to recognise canvas-->
<html>
<head>
<title>Dual sliding door effect with one Image</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
    function MyOnLoad() {
        var cvContext, my_gradient;
        var width, height, widthWin, heightWin, widthDoc, heightDoc, widthMain;
        var divBox = document.getElementById('divBox');
        var divHolder = document.getElementById("divHolder");
        var divUnderneath = document.getElementById("divUnderneath");
        var divDoorLeft = document.getElementById("divDoorLeft");
        var divDoorRight = document.getElementById("divDoorRight");
        var canvas1 = document.getElementById("canvas1");
        var canvas2 = document.getElementById("canvas2");

        widthWin = $(window).width();   // returns width of browser viewport
        heightWin = $(window).height();   // returns width of browser viewport
        widthDoc = $(document).width(); // returns width of HTML document
        heightDoc = $(document).height(); // returns width of HTML document

        width = widthWin;
        height = heightWin;

        divBox.style.width = width;
        divBox.style.height = height;
        divBox.style.background = "#AAFFAA";
        divBox.style.position = "relative";
        divBox.style.overflow = "hidden";
        divBox.style.color  = "#FFFFFF";

        divHolder.style.width = width;
        divHolder.style.height = height;
        divHolder.style.background = "#AAAAFF";
        divHolder.style.position = "absolute";

        divUnderneath.style.width = width;
        divUnderneath.style.height = height;
        divUnderneath.style.background = "#FFAAAA";

        divDoorLeft.style.position = "relative";
        divDoorLeft.style.overflow = "hidden";
        divDoorLeft.style.width = Math.round(0.5 * width);
        divDoorLeft.style.height = height;
        divDoorLeft.style.float = "left";

        divDoorRight.style.position = "relative";
        divDoorRight.style.overflow = "hidden";
        divDoorRight.style.width = Math.round(0.5 * width);
        divDoorRight.style.height = height;
        divDoorRight.style.float = "left";
        divDoorRight.style.marginLeft = -width;

        canvas1.width = Math.round(0.5 * width);
        canvas1.height = height;
        cvContext = canvas1.getContext("2d");
        my_gradient = cvContext.createLinearGradient(0, 0, canvas1.width, canvas1.height);
        my_gradient.addColorStop(0, "blue");
        my_gradient.addColorStop(1, "white");
        cvContext.fillStyle = my_gradient;
        cvContext.fillRect(0, 0, canvas1.width, canvas1.height);

        canvas2.width = Math.round(0.5 * width);
        canvas2.height = height;
        cvContext = canvas2.getContext("2d");
        my_gradient = cvContext.createLinearGradient(0, 0, canvas2.width, canvas2.height);
        my_gradient.addColorStop(0, "blue");
        my_gradient.addColorStop(1, "white");
        cvContext.fillStyle = my_gradient;
        cvContext.fillRect(0, 0, canvas2.width, canvas2.height);

        //when the user hovers over the div that contains our html...
        var d = $("divBox");
        $("divBox").hover(function () {
            //... we get the width of the div and split it by 2  ...
            var width = $(this).outerWidth() / 2;
            /*... and using that width we move the left "part" of the image to left and right "part"
            to right by changing it's indent from left side or right side... */
            $(this).find('divDoorLeft').animate({ right: width }, { queue: false, duration: 300 });
            $(this).find('divDoorRight').animate({ left: width }, { queue: false, duration: 300 });
        }, function () {
            //... and when he hovers out we get the images back to their's starting position using the same function... '
            $(this).find('divDoorLeft').animate({ right: 0 }, { queue: false, duration: 300 });
            $(this).find('divDoorRight').animate({ left: 0 }, { queue: false, duration: 300 });
            //... close it and that's it
        });
    }
</script>
</head>

<body onload="MyOnLoad()" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#FF0000">
<div id="divBox">        
        <div id="divHolder">
            <div id="divDoorLeft"><canvas id="canvas1"/></div>
            <div id="divDoorRight"><canvas id="canvas2"/></div>

        </div>
        <div id="divUnderneath">
            Looks nice doesn't it :)
        </div>
</div>
</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

趴在窗边数星星i 2024-12-17 06:57:49

您需要将“下面的文本”放入它自己的 div 中，并使用 css height 或 min-height 属性来使其正常工作。

<div id="underneath" style="height: 400px;">
    The text underneath
</div>

请参阅此链接以获取更多信息或稍微使用一下代码：
你的 JS Fiddle

You need to put "the text underneath" into it's own div, and use a css height or min-height attribute to get this to work.

<div id="underneath" style="height: 400px;">
    The text underneath
</div>

See this link for more info or to play with the code a bit:
your JS Fiddle

回复 原文
~没有更多了~

关于作者

稚然

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文