ब्राउज़र विंडो के आकार के आधार पर गतिशील रूप से आकार का आकार बदलें

मैं ब्राउज़र विंडो के आकार के आधार पर एक div गतिशील रूप से आकार बदलने का तरीका जानने का प्रयास कर रहा हूं। http://jsbin.com/uxomul ब्राउज़र विंडो के आकार के आधार पर गतिशील रूप से आकार का आकार बदलें

मुझे क्या करना चाहते हैं, ताकि div हमेशा भरता क्या ब्राउज़र विंडो की ऊंचाई का बचा है div कि छवियों रखती आकार बदलने के लिए है (: मैं एक jsbin कि मेरी समस्या है, यहाँ दिखाता है सेट कर लेते हैं नीचे 25px मार्जिन को छोड़कर, यह शरीर पर सेट है)।

यहाँ एक डेमो शायद दिखाता है कि मैं क्या और अधिक स्पष्ट रूप हासिल करना चाहते है: http://emilolsson.com/shop/demo/layers

कोई भी विचार क्या सबसे अच्छा तरीका यह दृष्टिकोण होगा

स्रोत

2012-01-03 INT

आप कुछ इस तरह कर सकते हैं:

var width = $(window).width() - 25; 
$("#mydiv").width(width);

25 सिर्फ एक नमूना संख्या है, उदाहरण के लिए अपने मार्जिन (आप इस गतिशील रूप से भी प्राप्त कर सकते हैं)

आप इसे एक फ़ंक्शन में लपेटना भी चाहते हैं और इसे दोनों पेज लोड पर और

स्रोत

2012-01-03 19:30:20 Andre

निर्माण पूरी तरह से, नहीं सोचा था कि यह इतना आसान होने वाला था, धन्यवाद! संपादित करें: अब यह समझ गया कि मुझे -25 के बजाय -120 का उपयोग करने की आवश्यकता है, वह क्यों है? http://jsbin.com/afokor – INT

शायद वहाँ दूसरों चीजें हैं जो आप को ध्यान में नहीं, बॉर्डर, paddings, शरीर मार्जिन, आदि की तरह आप सभी तत्वों को आप की जरूरत है, तो आप उपयोग कर सकते हैं पता है 'jQuery (तत्व ले लिया है कर रहे हैं) .outerWidth (सही) ' $ (तत्व) .attr (के माध्यम से प्रत्येक – Andre

स्थापना चौड़ाई पर 'चौड़ाई', 100) चौड़ाई मान सेट होगा, लेकिन फोन पर तत्व का आकार नहीं। एक उल्लेख के लायक है। तुम भी $ ('तत्व')। सीएसएस ('चौड़ाई', '100px') जो तत्व का आकार बदलने करता है जब कहा जाता है का उपयोग कर सकते हैं। – NuclearPeon

आप ब्राउज़र की विंडो के आकार बदलने की घटना से जुड़ने का प्रयास कर सकते हैं।

उदाहरण के लिए:

window.onresize = function() { 
//your code 
}

स्रोत

2012-01-03 19:25:11 scripto

पर आकार देने पर भी कॉल कर सकते हैं सीएसएस स्थिति का प्रयोग करें: सीएसएस शीर्ष/नीचे/बाएं/दाएं के साथ संयोजन में पूर्ण/सापेक्ष। उदाहरण:

<!doctype html> 
<html> 
    <head> 
     <style> 
      html, body { margin:0; padding:0; width:100%; height:100%; } 

      #head   { width:100%; height:100px; background:black; color:white; } 
      #head > h1 { margin:0; } 

      #body   { position:absolute; width:100%; top:100px; bottom:25px; background:red; } 
      #body > div { position:absolute !important; } 
      #body-sidebar { width:200px; top:0; bottom:0; background:black; color:white; } 
      #body-content { left:200px; right:0; top:0; bottom:0; background:white; overflow:scroll; } 
      #body-content > img { margin:25px; width:500px; vertical-align:middle; } 
     </style> 
    </head> 

    <body> 

     <!-- Head --> 
     <div id="head"> 
      <h1>Header</h1> 
     </div> 

     <!-- Body --> 
     <div id="body"> 

      <!-- Sidebar --> 
      <div id="body-sidebar"> 
       <h2>Sidebar</h2> 
      </div> 

      <!-- Content --> 
      <div id="body-content"> 
       <h2>Content</h2> 
       <img src="http://dl.dropbox.com/u/3618143/image1.jpg" /> 
       <img src="http://dl.dropbox.com/u/3618143/image2.jpg" /> 
       <img src="http://dl.dropbox.com/u/3618143/image3.jpg" /> 
      </div> 

     </div> 

    </body> 
</html>

स्रोत

2012-01-03 20:54:42

एचएम, मैंने स्थानीय और जेएसबीएन दोनों पर यह कोशिश की (यह नहीं कि इससे कोई फर्क पड़ेगा) लेकिन ऐसा लगता है कि यह काम नहीं कर रहा है? http://jsbin.com/oxeqok – INT

यह क्रोम, एफएफ, आईई 7+, सफारी और ओपेरा के तहत स्थानीय रूप से मेरे लिए काम करता है। उदाहरण तीन खंड दिखाता है: हेड, साइडबार, और सामग्री। साइडबार और सामग्री दोनों पृष्ठ क्षैतिज रूप से भरें (शून्य से 25px नीचे मार्जिन)। सिर ऊंचाई में 100px है, और साइडबार चौड़ाई में 200px है। सामग्री शेष क्षेत्र भरता है और सादगी के लिए स्क्रॉलबार है, हालांकि कस्टम स्लाइड शो की तरह स्क्रॉल प्रभाव (अपने उदाहरण की तरह) बनाने के बजाय लागू किया जा सकता। क्या देखती है? –

स्थिति तय की जानी चाहिए ताकि इसे स्वचालित रूप से आकार दिया जा सके।

स्क्रीन ऊंचाई रन टाइम

सीएसएस शीट में इस रखो में परिवर्तित हुआ है:

#FitScreenHeight 
{ 
    position:fixed 
    height:100% 
}

स्रोत

2015-11-02 11:36:39 Tarek

मुझे यकीन नहीं है कि यह सार्वभौमिक रूप से काम करता है। । । –

ब्राउज़र विंडो के आकार के आधार पर गतिशील रूप से आकार का आकार बदलें

उत्तर

संबंधित मुद्दे